Displaying a vue component inside highcharts tooltip via vue-portal

Question

I'm quite far on this but getting stuck here.

Here is my nearly complete example:

https://codesandbox.io/s/highcharts-vue-demo-forked-5pgv2h?file=/src/components/Chart.vue

What I'm doing

• I try to keep it short since you can see the code in the example.
• In the formatter function I assign the point I am hovering above to my ParentComponent (Chart.vue).
• This point is the input for my ChildComponent (TooltipFormatter.vue).
• I use vue-portal to render the TooltipFormatter inside the highcharts-tooltip.
• When switching from one point to another, I have to turn the portal off so it stops rendering the portal in the old tooltip and turn it on again on nextTick in order to render the component inside the new tooltip.
• Additionally in the formatter-function, I create an instance of the TooltipFormatter. Call it "mock". I return the outerHTML of this mock so that highcharts knows how to size and position the tooltip. This mock will be replaced by the portal after it gets switched on again.

My Problem

• I want the portal to stay alive and not turn it off and on again. In my example there is the TooltipFormatter outside the Chart. You can see, that the progress bar has some animations. Inside the ChartTooltip the progress bar has no animations because the component gets killed and created every time.
• I have to create a mock everytime via new Vue(...) so that highcharts knows how to size and position the tooltip. I think that could be handled in a better way but found no better solution. I tried to mock it only one time and save&reuse the mock. But if the TooltipFormatter grows bigger than the original mock, it will outflow the tooltip. (You can test this, if you uncheck "Create mock every time" and then hover above Point "1")

Note

This is related to this issue https://github.com/highcharts/highcharts-vue/issues/136

But I struggle with composition-API and I could not make his example work when translating it to options-API. You may recognise that my codesandbox-example is a fork of his.

Answer 1

I got it. I worked my up on @Denyllon (see Github-Link) solution.

Here with JSX in the render() function

https://codesandbox.io/s/highcharts-vue-demo-forked-zv4czp?file=/src/components/Chart.vue

Then I took out JSX, still using render()

https://codesandbox.io/s/vue-tooltip-working-native-render-gg6pf5

Last but not least I took out JSX at all, just using

https://codesandbox.io/s/vue-tooltip-working-template-qz7wvw?file=/src/components/Chart.vue