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

score 12 · Answer 1 · answered Jul 24 '19 at 16:42

12

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
    },
    ...
}

answered Jul 24 '19 at 16:42

Philip Bulley

9,014
3
33
46

3

This is because arrow functions lose track of "this" and we have to use normal functions :) thank you – Afsanefda Sep 05 '19 at 06:19
You are right way. Thanks. – Farshid Ghiasimanesh Jan 09 '22 at 12:50

Adrien Lacroix · Accepted Answer · 2017-08-10T18:38:25.950

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'));

What is the purpose of `this.props.navs` you are passing around? I logged it to the console before the render function and it's undefined? — Jstuff, Nov 14 '17 at 23:15

score 3 · Answer 3 · answered May 24 '18 at 08:50

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
    }
  }
}

score 1 · Answer 4 · answered Feb 18 '21 at 16:12

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} />);
        },
    },
};

score -2 · Answer 5 · answered Nov 09 '18 at 12:18

I have created a tooltip switcher which can be used as a regular tooltip or as shared.

The isTooltipShared is a boolean prop that indicates if a tooltip is shared or not.

const options = {
    tooltip: {
              formatter: props.isTooltipShared ?
                function () {
                  let s = `<b> ${this.x} </b>`;
                  this.points.forEach((point) => {
                    s += `<br/> ${point.series.name} : ${point.y}`;
                  });
                  return s;
                } : function () {
                  return `${this.series.name} : <b> ${this.x} </b> - <b> ${this.y} </b>`;
                },
              shared: props.isTooltipShared,
            },
};

And used with,

<HighchartsReact
   highcharts={Highcharts}
   options={options}
/>

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

5 Answers5

Linked