My question is related to the tooltip formatter property and how I can call Javascript code from within the Html that I generate in this function.
I'm currently generating a tooltip in Html using the formatter function. This works fine for displaying static Html in the tooltip.
Silly example to illustrate my current state
Code: Select all
tooltip:formatter(){
return <div>Some static code here</div>
}
Code: Select all
const [options, setOptions] = React.useState<Highcharts.Options>({ ... });
I initially tried something similar to the tutorial How to display a chart in a toolip (https://www.highcharts.com/blog/tutoria ... e-tooltip/). This tutorial shows how to return code in the formatter function.
So I tried something similar by doing this
Code: Select all
formatter: function () {
return <MyFuncComponent></MyFuncComponent>
}
I investigated React.createPortal but couldn't get it to work inside the formatter function either.
My goal would be to do something similar to following code sample where I still have my static code AND I'm adding a button to call my Javascript code
Code: Select all
formatter: function () {
return <div>Some static code here
<button> click={() => setOptions({...})}></button>
</div>
}
Would anyone have an idea on how I could do this?