runfaj
Posts: 9
Joined: Thu Sep 29, 2022 11:07 pm

Gauge guarantee min/max labels

Hey, I've seen a couple posts on this issue, but didn't see any good resolutions. The main problem I'm having is around gauge min/max. Here's a fiddle with the problem (ignore the label placement for this fiddle - I didn't include a whole custom positioner for brevity): https://jsfiddle.net/runfaj/te2zj03x/9/

I have charts dynamic to where users are the ones that specify the min/max and the value for the needle. They can also choose to show ticks, show values on the ticks, or only show the min/max value. Thus what I essentially need is to ALWAYS force the tick outputs to be the min and max, potentially also showing intermediate ticks with values.

What I'm finding is that some gauge ranges this is totally fine and works as expected, but others do not. You can see in this specific fiddle that I would expect the min and max to be 1 and 125000, but for some reason, it is picking 10000 and 120000 to display. I can fudge the numbers a little bit with a formatter pretty easily and modify the actual min/max, but since I have no control over the min/max the user provides, I need something more robust than that.

Do you have any ideas on a solution for this? Or is it a bug altogether?
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: Gauge guarantee min/max labels

Hello runfaj,

Thanks for contacting us again.

The min/max values might be affected by the startOnTick or endOnTick properties which are true by default. Also, based on your example, the tickPixelInterval property you set affects the display of the max value.

The best way to set the direct min/max values and keep your case functionality is to use the tickPositions/tickPositioner property. I have updated your example with the simple use of that. Note that on the top I defined the user's min and max properties to visualize the solution for your case, see: https://jsfiddle.net/BlackLabel/nLuxsmqr/

You can read more about these properties here:
https://api.highcharts.com/highcharts/yAxis.min
https://api.highcharts.com/highcharts/yAxis.max
https://api.highcharts.com/highcharts/y ... kPositions
https://api.highcharts.com/highcharts/y ... Positioner

Let me know if you found it helpful,
Kind Regards!
Kamil Kubik
Highcharts Developer
runfaj
Posts: 9
Joined: Thu Sep 29, 2022 11:07 pm

Re: Gauge guarantee min/max labels

Hey, thanks for the response! This does work specifically for the example, however, it causes issues when I need the intermediate labels. If you look in the example, I have the formatter as:

Code: Select all

formatter() {
  if (!this.isFirst && !this.isLast) return '';
  return this.value;
},
However, in reality for my chart, this is also a configurable thing like so:

Code: Select all

formatter() {
  if (showDefaultLabels && !displayNumbers) {
    if (!this.isFirst && !this.isLast) return '';
  }
  return this.value;
},
Here's a second fiddle with an example where the user might have configured the labels to show: https://jsfiddle.net/runfaj/fk9xh2jw/3/

So the issue with tickPositions is that all those auto-calculated intermediate labels are just completely lost. Is there some sort of solution that would allow that hard min/max, but also add all the smart calculating that highcharts does with showing the full set of labels? For additional context, the chart sizes are also completely dynamic, so I can't easily pick just a set number of labels and calculate those, or I would have to do it for a massive range of potential chart sizes.
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: Gauge guarantee min/max labels

Note that there must be specified the ticks interval to let the chart know how to display the labels. By default, it's the tickPixelInterval property which is changed in your case to 40. Based on your values it's set after the 10000, so either the 1 and 125000 values aren't displayed.

My recommendation is to set the first and the last labels (min and mix) directly and let the chart calculate the rest labels. You should do that inside the tickPositioner method.

I have updated your example, see: https://jsfiddle.net/BlackLabel/o3n21yzb/

Let me know if I understood you correctly and if this solution works for you,
Regards!
Kamil Kubik
Highcharts Developer
runfaj
Posts: 9
Joined: Thu Sep 29, 2022 11:07 pm

Re: Gauge guarantee min/max labels

Thanks! Even though not super even on spacing, I think this will work for an intermediate solution. I should be able to work with this for now!
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: Gauge guarantee min/max labels

That's great to hear you found it helpful.

However, if at some time the solution won't be sufficient, feel free to provide your current app state along with the problem.

Regards!
Kamil Kubik
Highcharts Developer

Return to “Highcharts Usage”