Search code examples
angularhighchartsgauge

Highcharts Speedometer with multiple dial in the gauge chart in Angular14

I want to implement a speedometer with an inner and outer(additional indicator in a triangle shape) dial using Highcharts gauge in Angular14. Is there any way, to show an additional indicator using the Highcharts gauge in Angular14? My expectation is shown in the figure. enter image description here

Solution

  • First, you need a custom plugin, which creates a triangle dial when series.isTrianglePoint is set to true. Plugin is inside a customPlugin.ts file and is imported inside app component. Then, you can use two series with two separate dials, one with isTrianglePoint: true.

    Live demo: https://stackblitz.com/edit/highcharts-angular-line-jdhsit

    API Reference: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts https://github.com/highcharts/highcharts-angular#to-load-a-wrapper https://api.highcharts.com/highcharts/series.gauge.dial