Sometimes, we want to use the chart tooltip formatter in react-highcharts.
In this article, we’ll look at how to use the chart tooltip formatter in react-highcharts.
How to use the chart tooltip formatter in react-highcharts?
To use the chart tooltip formatter in react-highcharts, we can set the tooltip.formatter
property to a function that returns the tooltip text.
For instance, we write:
import React from "react";
import ReactHighcharts from "react-highcharts";
const config = {
xAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May"]
},
tooltip: {
formatter() {
let s = `<b>${this.x}</b>`;
this.points.forEach(
(point) => (s += `<br/>${point.series.name}: ${point.y}m`)
);
return s;
},
shared: true
},
series: [
{
data: [29.9, 71.5, 106.4, 129.2, 144.0]
},
{
data: [194.1, 95.6, 54.4, 29.9, 71.5]
}
]
};
export default function App() {
return (
<div>
<ReactHighcharts config={config} />
</div>
);
}
We define the config
object to store the config for the chart.
The series
property defines the series data.
xAxis
defines the x-axis texts.
And the tooltip.formatter
method returns the text for each tooltip.
We get the x coordinate value for the point with this.x
.
And this.points
has the points’ data.
point.series.name
has the series name. And point.y
has the y-coordinate value.
Conclusion
To use the chart tooltip formatter in react-highcharts, we can set the tooltip.formatter
property to a function that returns the tooltip text.