How can I use tooltip tooltip format in reaction charts?

Question

How can I use the chart diagram formatter? I use a reactive shell for high cards.
I have this configuration:

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 the chart area using this keyword, and I also can’t get the point from the tooltip parameter. Thanks

Answer 1

I have already encountered this problem. I solved this by creating a function to format the tooltip and applying default values ​​to the required data.

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

Answer 2

here's another way that will also help 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 3

The OP was unable to figure out how to access the chart area using the this . The simple answer is that the OP used the bold arrow function. Instead, try using a regular function according to this modified version of the OP 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 4

I created a tooltip switch that can be used as a regular tooltip or as a general one.

isTooltipShared is a boolean isTooltipShared that indicates whether the 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} />