CODEWITHSUNDEEP
reactjsrecharts
farm command
farm command

Reputation: 693

how to add extra information in the point/hoverover tooltip

I am using recharts in my project. The chart that I'm using is CustomizedLabelLineChart. My problem is that the values that I'm using for X-axis are too long, so I need to kinda remove them from the X-axis but still have them in the chart-hoverover tooltip. How to do that? In other words, I need to have some extra data added to each point/hoverover tooltip.

enter image description here

Upvotes: 1

Views: 1244

Answers (1)

liamvovk
liamvovk

Reputation: 705

You can create a custom tooltip component and pass it as the prop called content in , here is an example with custom tooltip called 

<CustomizedLabelLineChart width={600} height={300} data={data}>
  <XAxis dataKey="name" tick={<CustomAxisTick />} />
  <YAxis />
  <Tooltip content={<CustomTooltip />}/>
  ...
</CustomizedLabelLineChart>

Reference: http://recharts.org/en-US/guide/customize

Upvotes: 2

Related Questions