diff --git a/web/components/analytics/charts.tsx b/web/components/analytics/charts.tsx
index 9e156a5b..2f987d58 100644
--- a/web/components/analytics/charts.tsx
+++ b/web/components/analytics/charts.tsx
@@ -114,17 +114,11 @@ export function DailyPercentChart(props: {
function Tooltip(props: { point: Point }) {
const { point } = props
return (
-
{point.serieId} {point.data.yFormatted}
diff --git a/web/components/contract/numeric-graph.tsx b/web/components/contract/numeric-graph.tsx
index 4343e4c8..621c0e29 100644
--- a/web/components/contract/numeric-graph.tsx
+++ b/web/components/contract/numeric-graph.tsx
@@ -1,11 +1,13 @@
import { DatumValue } from '@nivo/core'
-import { ResponsiveLine } from '@nivo/line'
+import { Point, ResponsiveLine } from '@nivo/line'
import { NUMERIC_GRAPH_COLOR } from 'common/numeric-constants'
import { memo } from 'react'
import { range } from 'lodash'
import { getDpmOutcomeProbabilities } from '../../../common/calculate-dpm'
import { NumericContract } from '../../../common/contract'
import { useWindowSize } from '../../hooks/use-window-size'
+import { Col } from '../layout/col'
+import { formatLargeNumber } from 'common/util/format'
export const NumericGraph = memo(function NumericGraph(props: {
contract: NumericContract
@@ -62,6 +64,10 @@ export const NumericGraph = memo(function NumericGraph(props: {
colors={{ datum: 'color' }}
pointSize={0}
enableSlices="x"
+ sliceTooltip={({ slice }) => {
+ const point = slice.points[0]
+ return
+ }}
enableGridX={!!width && width >= 800}
enableArea
margin={{ top: 20, right: 28, bottom: 22, left: 50 }}
@@ -74,3 +80,20 @@ function formatPercent(y: DatumValue) {
const p = Math.round(+y * 100) / 100
return `${p}%`
}
+
+function Tooltip(props: { point: Point }) {
+ const { point } = props
+ return (
+
+
+ {point.serieId} {point.data.yFormatted}
+
+
{formatLargeNumber(+point.data.x)}
+
+ )
+}