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.

Answer 1

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