diff --git a/packages/web/components/chart/historical-chart.tsx b/packages/web/components/chart/historical-chart.tsx index 97848fed37..2941a221e0 100644 --- a/packages/web/components/chart/historical-chart.tsx +++ b/packages/web/components/chart/historical-chart.tsx @@ -121,7 +121,7 @@ export const HistoricalChart = memo((props: HistoricalChartProps) => { data, }, ]} - onCrosshairMove={(params) => { + onDataPointHover={(params) => { if (params.seriesData.size > 0) { const [data] = [...params.seriesData.values()] as AreaData[]; diff --git a/packages/web/components/chart/historical-volume-chart.tsx b/packages/web/components/chart/historical-volume-chart.tsx index 657b86bb6a..99c774997b 100644 --- a/packages/web/components/chart/historical-volume-chart.tsx +++ b/packages/web/components/chart/historical-volume-chart.tsx @@ -95,7 +95,7 @@ export const HistoricalVolumeChart = memo( data, }, ]} - onCrosshairMove={(params) => { + onDataPointHover={(params) => { if (params.seriesData.size > 0) { const [data] = [...params.seriesData.values()] as AreaData[]; diff --git a/packages/web/components/chart/light-weight-charts/chart.tsx b/packages/web/components/chart/light-weight-charts/chart.tsx index 98db6cf8ee..ba09a0a5d1 100644 --- a/packages/web/components/chart/light-weight-charts/chart.tsx +++ b/packages/web/components/chart/light-weight-charts/chart.tsx @@ -11,6 +11,7 @@ import { import React, { memo, PropsWithChildren, + useCallback, useEffect, useRef, useState, @@ -196,6 +197,7 @@ interface ChartProps { params: ChartControllerParams ) => ChartController; onCrosshairMove?: (params: MouseEventParams) => void; + onDataPointHover?: (params: MouseEventParams) => void; } export const Chart = memo( @@ -207,10 +209,25 @@ export const Chart = memo( children, series, onCrosshairMove, + onDataPointHover, Controller, } = props; const [container, setContainer] = useState(null); const chart = useRef>(); + const lastHoverDataPointLogicalIndex = + useRef["logical"]>(undefined); + + const onCrosshairMoveInternal = useCallback( + (params: MouseEventParams) => { + onCrosshairMove?.(params); + + if (lastHoverDataPointLogicalIndex.current !== params.logical) { + onDataPointHover?.(params); + } + lastHoverDataPointLogicalIndex.current = params.logical; + }, + [onCrosshairMove, onDataPointHover] + ); useSyncExternalStore( resizeSubscribe, @@ -228,7 +245,7 @@ export const Chart = memo( }, series, container, - onCrosshairMove, + onCrosshairMove: onCrosshairMoveInternal, }); }