ZottoSL
Posts: 17
Joined: Wed Oct 31, 2018 3:37 pm

Combine gauge chart with line chart

Hi!

Is it possible to combine a line chart with a gauge in the same chart (div)?

I'm looking for something like that, but replacing the pie chart with a gauge chart:
https://jsfiddle.net/gh/get/library/pur ... emo/combo/

Thanks!
bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: Combine gauge chart with line chart

Hello ZottoSL,

I am afraid that it's not possible to combine a line chart with a gauge in the same div because setting the chart type to gauge changes how the chart is built, not just the series but the axis, grids and so on. The only other option is to defined gauge inside another container and set this container in the desired way. Check out this example: https://jsfiddle.net/Bastss/ymp9ncfh/

Best regards!
Last edited by bastss on Fri Nov 16, 2018 1:12 pm, edited 1 time in total.
Sebastian Wędzel,
Highcharts Developer
ZottoSL
Posts: 17
Joined: Wed Oct 31, 2018 3:37 pm

Re: Combine gauge chart with line chart

Ok, I get it. I tell you what I need to know if it is possible.
I need that when I do mouseover on a point in the line graph, the gauge graph shows that point. If I move to another point, again the gauge graph moves your needle to the new point. Is it possible?

Thank you!
bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: Combine gauge chart with line chart

ZottoSL,

Yes, it is possible. Inside mouseOver API:https://api.highcharts.com/highcharts/s ... .mouseOver function you can draw gauge shape by using Highcharts SVGRenderer.arc class API:https://api.highcharts.com/class-refere ... nderer#arc and destroy it in mouseOut function.

Another solution is to create a solid gauge chart for each point, just as I did in the upper example, hide and show it for each point using mouseOver and mouseOut functions, but It requires a lot of work.

Best regards!
Sebastian Wędzel,
Highcharts Developer

Return to “Highcharts Usage”