mandro
Posts: 4
Joined: Thu Jan 13, 2022 5:25 am

Responsive props not working properly with multi-series solid gauge chart

Hello!
I'm trying to create multiple charts on a single chart using multiple series, everything works fine until I try to add a responsive chart with a condition. See a simple example: https://jsfiddle.net/8vkuydot/9/ . When you start to reduce the page size to catch the condition, the series will disappear on all charts except one, when you reset the window size, the series will not return to all charts. But it is expected that they will not disappear at all in all conditions.
Can you help me if I'm doing something wrong or is this a bug?
In my application, I use the size of each individual series, but the size of the entire chart causes the same behavior.
Previously, I used a separate chart for each series, combined into one wrapper, and everything worked well with the conditions, but now this is not suitable, as it works slowly when the chart is resized.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Responsive props not working properly with multi-series solid gauge chart

Hello,

Welcome to our forum and thanks for contacting us with your question!

The bug shows up when you use HTML with CSS in a dataLabels.format property. A better way to change font size is to use dataLabels.style property. Another thing that can generate this problem is the callback condition you used. It is better to use responsive.rules.condition.maxHeight and responsive.rules.condition.minWidth here.

And one more suggestion at the end. If the series have repeating properties, you can put them in plotOptions as in the demo.

Demo: https://jsfiddle.net/BlackLabel/n1emrxzo/
API: https://api.highcharts.com/highcharts/p ... bels.style
https://api.highcharts.com/highcharts/r ... .maxHeight
https://api.highcharts.com/highcharts/r ... n.minWidth

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
mandro
Posts: 4
Joined: Thu Jan 13, 2022 5:25 am

Re: Responsive props not working properly with multi-series solid gauge chart

Thanks for the advice, it helped me.
But I have one more problem: since the size of my chart is dynamic, I can get a case where there is no gap between the series at all, but I would like to have a minimum margin between charts inside the main chart. For example, some types of charts have a groupPadding property, but for solid gauge I didn't find it.
mandro
Posts: 4
Joined: Thu Jan 13, 2022 5:25 am

Re: Responsive props not working properly with multi-series solid gauge chart

And one more question, if I can't use HTML with CSS to format series, but I would like to add a prefix to this data in addition to the data, for example, Mb/s.
How can I implement this?
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Responsive props not working properly with multi-series solid gauge chart

I am glad to hear that it was helpful!
mandro wrote: Sun Jan 23, 2022 5:24 pm I would like to have a minimum margin between charts inside the main chart. For example, some types of charts have a groupPadding property, but for solid gauge I didn't find it.
The solid gauge does not have this property because it is created in a different way. You can achieve this effect by manipulating the values in the pane.center and pane.size properties
mandro wrote: Mon Jan 24, 2022 5:25 am I would like to add a prefix to this data in addition to the data, for example, Mb/s.
How can I implement this?
To implement this you can use plotOptions.solidgauge.dataLabels.format property.

Demo: https://jsfiddle.net/BlackLabel/7ct69ahn/
API: https://api.highcharts.com/highcharts/p ... els.format

Let me know if that was what you were looking for!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”