Leah
Posts: 19
Joined: Thu Sep 08, 2022 11:53 am

Gauge Plot Bands Exceeding Axis Min & Max

I have noticed that if you have a plot bound outside of the bounds of the axis it'll render it ( see red plot bound ), is there a way to prevent this? Could I add the ranges after the chart has determined the axis min and max ( notice I haven't set the max ) so I can remove plot bounds that should not be included?

Image

Code: Select all

{
      chart: {
        type: 'gauge'
      },
      pane: {
        startAngle: -145,
        endAngle: 145,
        background: null
      },
      yAxis: {
        min: 0,
        max: null,
        lineWidth: 5,
        plotBands: [
          {from: 0, to: 2, color: 'silver', thickness: '25%'},
          {from: 2, to: 3, color: 'yellow', thickness: '25%'},
          {from: 3, to: 4, color: 'orange', thickness: '25%'},
          {from: 4, to: 5, color: 'red', thickness: '25%'}
        ]
      },
      series: [{
        data: [3.3, 2.1]
      }]
    }
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Gauge Plot Bands Exceeding Axis Min & Max

HI Leah!
We appreciate you reaching out to us!

Plotbands should be set based on extremes of the data of the chart. If you don't want to show platbands on a specific range, just don't add it to the config, then if you change your chart, for example, updated with new data, you can also update platbands, by using axis.update method: https://api.highcharts.com/class-refere ... xis#update

If I didn't understand your question, please show me a little bit more light on the matter to help me understand it better.

Let me know if you have any further questions.
Regards!
Hubert Kozik
Highcharts Developer
Leah
Posts: 19
Joined: Thu Sep 08, 2022 11:53 am

Re: Gauge Plot Bands Exceeding Axis Min & Max

I'm struggling with it rending the red band, as you can see it's drawn outside of the axis?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Gauge Plot Bands Exceeding Axis Min & Max

Leah,
As I said in my previous post, if you don't want to show platbands on a specific range, just don't add it to the config. You can also remove them in chart.events.load event, like in the demo below.

Demo: https://jsfiddle.net/BlackLabel/5j4nk60d/

Regards!
Hubert Kozik
Highcharts Developer
Leah
Posts: 19
Joined: Thu Sep 08, 2022 11:53 am

Re: Gauge Plot Bands Exceeding Axis Min & Max

Sorry to elaborate the data is coming from an API so I don't have direct control of it so comparing the plot bands to the chart axis and removing them is exactly what I want, thank you.

However how do I access the instance of the chart when using the angular version with the load event? "this" within the load event refers to a GaugeComponent, but has not y axis, or chart property?

Image

Image
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Gauge Plot Bands Exceeding Axis Min & Max

Leah,
Just use a normal constuctor on function

Code: Select all

function() { } 
instead of arrow function because it is changing the context. With a normal constructor of function, you should be able to get chart object.

Regards!
Hubert Kozik
Highcharts Developer
Leah
Posts: 19
Joined: Thu Sep 08, 2022 11:53 am

Re: Gauge Plot Bands Exceeding Axis Min & Max

Thank you' I've got it working now :)
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Gauge Plot Bands Exceeding Axis Min & Max

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”