Tooltip with Multi Lineseries Chart with react-vis

639 views Asked by At

I've plotted multiple Line series chart and enabled tooltip. When I do it, it's giving me the value of the last plot. How do I get the Crosshair values for multiple line series at the same time.

Here is the code for the reference:

const [tooltip, setTooltip] = useState([])
return (
  <XYPlot
    xType='time'
    height={500}
    width={2000}
    margin={{ left: 80, right: 200, bottom: 100, top: 20 }}
    onMouseLeave={() => setTooltip([])}
  >
    <VerticalGridLines />
    <HorizontalGridLines />
    {series.map((entry, idx) => {
      const id = `${entry.title}`
      return (
        <LineSeries
          key={id}
          strokeWidth={1}
          data={entry.data}
          onNearestX={(d) => setTooltip([ d ])}
        />
      )
    })}
    <Crosshair values={tooltip} />
    <XAxis
      tickFormat={(d) => d.toLocaleDateString('default', { month: 'short' })}
      tickValues={selectedDates}
    />
    <YAxis />
  </XYPlot>
)
0

There are 0 answers