How can I use chart tooltip formatter in react-highcharts?

Question

how can I use chart tooltip formatter? I am using react wrapper for highcharts.
I have config like this:

const CHART_CONFIG = {
    ...
    tooltip:  
    {
        formatter: (tooltip) => {
            var s = '<b>' + this.x + '</b>';
            _.each(this.points, () => {
                s += '<br/>' + this.series.name + ': ' + this.y + 'm';
            });
            return s;
        },
        shared: true
    },
    ...
}    

But I can't access chart scope using this keyword and also I can't get point from tooltip param. Thanks

Answer 1

OP couldn't figure out how to access the scope of the chart using the this keyword. The simple answer is because OP was using a fat arrow function. Instead, try using a normal function as per this modified version of the OP's code:

const CHART_CONFIG = {
    ...
    tooltip:  
    {
        formatter() {   // Use a normal fn, not a fat arrow fn
            // Access properties using `this`
            // Return HTML string
        },
        shared: true
    },
    ...
}

Answer 2

Highcharts expects that tootlip fromatter will return an HTML string. When using react wrapper for Highcharts, it is possible to write a custom tooltip component with formatted data, then in the options when setting up formatter function you can use ReactDOMServer's renderToString method which will create HTML string from the given element. Though renderToString is intended for server-side rendering mainly, it can be used in browsers' environment without any problem.

import ReactDOMServer from 'react-dom/server';
import CustomTooltip from './CustomTooltip';

const options = {
    tooltip: {
        formatter() {
            return ReactDOMServer.renderToString(<CustomTooltip {...this} />);
        },
    },
};

Answer 3

here's another way that also helps you use React components as part of the tooltip itself.

const Item = ({name, value}) => <div> {name}: {value}</div>

const config = { 
  formatter(this) {
    const container = document.createElement("div");
    return this.points.map(point => {
      ReactDOM.render(
        <Item name={point.series.name} value={point.y}/>
      )
      return container.innerHTML
    }
  }
}

Answer 4

I've already encountered this problem. I've solved it by creating a function to format the tooltip, and applying default values to the data I wanted.

Here is a live example, with the code below:

import React, { Component } from 'react';
import { render } from 'react-dom';
import ReactHighcharts from 'react-highcharts';
import './style.css';

class App extends Component {
  static formatTooltip(tooltip, x = this.x, points = this.points) {
    let s = `<b>${x}</b>`;
    points.forEach((point) =>
      s += `<br/>${point.series.name}: ${point.y}m`
    );

    return s;
  }

  static getConfig = () => ({
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    tooltip: {
      formatter: App.formatTooltip,
      shared: true,
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]
    }],
  })

  render() {
    return (
      <div>
        <ReactHighcharts config={App.getConfig())} />
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));