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

Estimated read time 2 min read

The react-highcharts library provides a Tooltip component that you can use to format the tooltip for your chart. The Tooltip component accepts a formatter prop that specifies a function for formatting the tooltip content.

Here’s an example of how to use the Tooltip formatter in react-highcharts:

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'react-highcharts';
import { Tooltip } from 'react-highcharts';

function MyChart() {
  const data = [1, 2, 3, 4, 5];

  const tooltipFormatter = function() {
    return `<strong>X value:</strong> ${this.x}<br/><strong>Y value:</strong> ${this.y}`;
  }

  const config = {
    chart: {
      type: 'line'
    },
    title: {
      text: 'My Chart'
    },
    series: [{
      data: data
    }],
    tooltip: {
      formatter: tooltipFormatter
    }
  };

  return (
    <div>
      <HighchartsReact highcharts={Highcharts} options={config} />
    </div>
  );
}

export default MyChart;

In this example, we’re defining a MyChart component that uses react-highcharts to render a line chart with a custom tooltip formatter. We’re defining a data array that contains the data for our chart, and a tooltipFormatter function that formats the tooltip content.

We’re then defining a config object that specifies the chart type, title, series data, and tooltip formatter. We’re passing this config object to the options prop of the HighchartsReact component.

In the tooltipFormatter function, we’re using the this keyword to access the x and y values of the data point being hovered over, and returning a string that formats the tooltip content.

By using the Tooltip component and specifying a custom formatter function, you can format the tooltip content of your react-highcharts chart in a highly customizable way.

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply