Function useHoveredDate

  • React hook that keeps track of the point being hovered in a chart, used in ChartOverlayX. Given a timeseries, it returns the component's onMouseMove, onMouseLeave, and hoveredPoint (the point in the timeseries closest to the date being hovered.

    Example

    const { hoveredPoint, onMouseMove, onMouseLeave } = useHoveredDate(timeseries);

    return (
      <svg width={width} height={height}>
        <LineChart {...lineChartProps} />
        {hoveredPoint && (
          <Tooltip point={hoveredPoint}>
            <CircleMarker />
          </Tooltip>
        )}
        <ChartOverlayX
          onMouseMove={onMouseMove}
          onMouseLeave={onMouseLeave}
          {...otherProps}
        />
      </svg>
    );

    Returns

    The hovered point information and the onMouseMove and onMouseLeave callbacks.

    Type Parameters

    • T

    Parameters

    • timeseries: undefined | Timeseries<T>

      A timeseries of points that can be hovered, or undefined.

    Returns {
        hoveredPoint: null | TimeseriesPoint<T>;
        onMouseLeave: (() => void);
        onMouseMove: ((date: {
            date: Date;
        }) => void);
    }

    • hoveredPoint: null | TimeseriesPoint<T>
    • onMouseLeave: (() => void)
        • (): void

        • Returns void

    • onMouseMove: ((date: {
          date: Date;
      }) => void)
        • (date: {
              date: Date;
          }): void

        • Callback fired when the cursor moves over the overlay.

          Parameters

          • date: {
                date: Date;
            }

            The date being hovered.

            • date: Date

          Returns void

Settings

Member Visibility

Theme

Generated using TypeDoc