How to use the chart tooltip formatter in react-highcharts?

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.