useChartScrub

Connect the hook to onInteraction and read the current selection outside the plot.

tsx

import { Chart, useChartScrub, zyplot } from '@hzblj/zyplot'

export function PriceChart({ categories, values }) {
  const { onInteraction, selection } = useChartScrub()
  const value = selection ? values[selection.index] : values.at(-1)
  const chart = zyplot(z => ({
    categories,
    series: [z.series({ id: 'price', label: 'Price', values })],
    interaction: z.interaction.scrub({ selection: 'single' }),
    onInteraction,
  }))

  return (
    <>
      <strong>{value}</strong>
      <Chart.Line {...chart} />
    </>
  )
}

Returned values

Name	Type	Default	Description
`selection`	`ChartScrubSelection \| null`	—	Current datum index, category, and value.
`range`	`ChartInteractionRange \| null`	—	Two-finger range on native.
`geometry`	`ChartGeometry \| null`	—	Measured plot and annotation positions.
`onInteraction`	`ChartInteractionHandler`	—	Pass directly to the chart.
`reset`	`() => void`	—	Clear the current selection.