scottfwalter / angular-highcharts-tooltip

Dynamic Angular tooltip component in Highcharts.

Angular Highcharts Tooltip

Problem with Highcharts tooltips in Angular

Original motivation for this project here and here.

Using Highcharts with Angular comes with a few tradeoffs. The most difficult one that I have come across has been the lack of dynamic component support in the highcharts tooltip formatter. This repository shows you how to easily create a dynamic tooltip component with real chart data and inject it into the Highcharts view. Live example.

Setting up a dynamic tooltip

After creating your custom tooltip component, you can use the ComponentFactory class example to return a dynamically injected component. This symbol can then be passed through to the Highcharts formatter callback by using your new components nativeElement.outerHTML property. This allows you to fully control the template and styling of your tooltip instead of defining it using the Highcharts tooltip formatter API and string interpolation. You can also bind the point data that is currently hovered over, and pass that to a data attribute on your custom tooltip component.

Implementation example.

Custom tooltip example.

Starting the demo

Run the following commands after cloning this repository to demo this on your local machine

$ npm install
$ ng serve

Small Update