Nivo: sliceTooltip - how to map slice.id to x-axis value?

Created on 28 May 2019  路  2Comments  路  Source: plouc/nivo

How can I map the slice.id to the value on x-axis?

I'm trying to display a corresponding date/time value from the X-Axis in the sliceTooltip in the responsive line chart. As far I can see there is a slice.id property which seems to have a value stored in pixels.

image

line question awaiting feedback

Most helpful comment

The data property on the point should have what you are looking for. Something like this:

<ResponsiveLine
  // ...
  sliceTooltip={({ slice }) => (
    <div>
      {slice.points.map((point) => (
        <div>X Value: {point.data.x /* or `point.data.xFormatted` */}</div>
      ))}
    </div>
  ))}
/>

All 2 comments

I'm sorry, I don't really understand what you're trying to achieve, can you share your current props/data and ideally a screenshot of what you're expecting? Thank you

The data property on the point should have what you are looking for. Something like this:

<ResponsiveLine
  // ...
  sliceTooltip={({ slice }) => (
    <div>
      {slice.points.map((point) => (
        <div>X Value: {point.data.x /* or `point.data.xFormatted` */}</div>
      ))}
    </div>
  ))}
/>
Was this page helpful?
0 / 5 - 0 ratings