search

highcharts / highcharts-vue

Other
686 stars 150 forks source link

Formatter vue component #136

Closed miller-kevin closed 4 years ago

miller-kevin commented 4 years ago

In the tooltip formatter, is there a way to use a vue component rather than just using html strings?

We've got a fairly complex custom formatter, and I'd love to remove all the jquery dependencies by using a vue component instead.

Is there any information on either using a vue component in the string itself or a slot?

Denyllon commented 4 years ago

Hi @whoisme555

Thank you for contacting us. It is not possible to neither return the VNode, nor HTML element from formatter function. However, you can use a common plugin for Vue v2+, which is actually an equivalent of React Portals, and it's called vue-portal, combined with JSX syntax. Then it will be possible to define your own "view" for tooltip, and just put into into its HTML element.

Note: This solution is a bit complex, and requires calling chart core functions, so if something will not be clear enough, feel free to ask about that.

Live example: https://codesandbox.io/s/highcharts-vue-demo-voo9m

Kind regards!

EdmundoDelGusto commented 1 year ago

Hi, @Denyllon. Thank you for your code.

I was struggeling on this for three days now. I cannot use JSX in my project for now.

For everyone else out there, I created an example without using JSX

(see my answer)

https://stackoverflow.com/questions/77106264/displaying-a-vue-component-inside-highcharts-tooltip-via-vue-portal