Rechart Scatter tooltip to show additional prop

user_2108823 0
Viewed 1099

I'm using a Scatter chart from Rechart

The data is displaying fine but I want to tooltip to display an additional pop (the name of the item), just like it does on a Barchart. I've found that I could completely customize the tooltip but I wonder if there is an easier way ? like a prop that i don't know how to use. the doc isn't very explicit on how to use some of the props

here's the code. You can see that I've tried datakey and label, but without success

<ScatterChart
          width={400}
          height={400}
          margin={{
            top: 20, right: 20, bottom: 20, left: 20,
          }}
        >
          <CartesianGrid />
          <XAxis type="number" dataKey="sizeMB" name="Size" unit=" MB" />
          <YAxis type="number" dataKey="directReferenceCount" name="# of References" unit=" References" />
          <Tooltip cursor={{ strokeDasharray: '3 3' }} dataKey={'fullName'} label={'fullName'} />
          <Scatter name="Line Item" data={this.props.data} fill="#8884d8">

          </Scatter>
        </ScatterChart>
recharts
2 Answers

I didn't find a solution other than using the full custom tooltip. here's the code:

  const CustomTooltip = ({ active, payload, label }) => {
  if (active) {
    return (
      <div className="custom-tooltip">
        <p className="intro">{payload[0].payload.fullName}</p>
        <p className="desc">size: {payload[0].payload.sizeMB}</p>
      </div>
    );
  }

  return null;
};

And I had some trouble finding the same css as the original tooltip but here it is:

.custom-tooltip{
    margin: 0;
    line-height: 24px;
    border: 1px solid #f5f5f5;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
}

.intro {
  border-top: 1px solid #f5f5f5;
  margin: 0;
}

.desc {
  margin: 0;
  color: rgb(3, 62, 146)
}
user_21088230

I would modify the custom tooltip slightly to include a check for payload aswell

const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload) {
    return (
      <div className="custom-tooltip">
        <p className="intro">{payload[0].payload.fullName}</p>
        <p className="desc">size: {payload[0].payload.sizeMB}</p>
      </div>
    );
  }

  return null;
};
user_120485180
Related