How to Add button in React Highchart Tooltip?

Question

I am trying to add a button to the High-chart Tool-tip.But I am getting Uncaught ReferenceError: showMoreDetails is not defined at HTMLButtonElement.onclick

Following is the code I have for chart options. I am trying to add tooltip using tooltip formatter. Please let me know if there is a solution to listen to click events on React- highchart tooltip

showMoreDetails = () => {
console.log('showDetails');
}


chartOptions = {
    ...options,
    tooltip: {
      useHTML: true,
      backgroundColor: '#000000',
      borderRadius: 6,
      borderColor: '#000000',
      valueDecimals: 2,
      animation: true,
      style: {
        color: 'white',
        opacity: 0.75,
        shadow: '0px 3px 6px #000000',
        pointerEvents: 'auto'
      },
      hideDelay: 1000,
      formatter() {
        const { point } = this;
       return `<span>
        <span>Rating = ${point.y}</span>
        <button type="button" onclick="showMoreDetails()">More Details</button>
       </span>`
      }
    }
  }

and then I am passing this as options to React High-charts.

On the other hand when I add simple console.log or alert in onclick it works like charm.

<button type="button" onclick="alert('this shows an alert')"> details </button>

Please help me on this. Thanks in advance.

score 3 · Accepted Answer · answered Sep 09 '19 at 11:15

3

You need to set showMoreDetails as a global function. Please check below examples with function:

in a local scope: http://jsfiddle.net/BlackLabel/L6hygs35/
in a global scope: http://jsfiddle.net/BlackLabel/ycmb5xr3/

window.showMoreDetails = function() {
  console.log("showMoreDetails");
};

Live demo: https://codesandbox.io/s/highcharts-react-demo-wgznb

answered Sep 09 '19 at 11:15

ppotaczek

36,341
2
14
24

This approach is good but it pollutes the global scope and this function will be visible from outside. Is there any thing which we can do to protect that. – Abhishek Gangwar Sep 10 '19 at 10:57
Hi @abhishek gangwar, You can also wrap the `refresh` method and add the event there. Live example: https://codesandbox.io/s/highcharts-react-demo-gwk4k – ppotaczek Sep 10 '19 at 12:41
1

Hi @Evgeny Mironenko, You can pass a point by a function argument, example: https://codesandbox.io/s/highcharts-react-demo-forked-n7qvy?file=/demo.jsx – ppotaczek Oct 29 '20 at 09:32

How to Add button in React Highchart Tooltip?

1 Answers1