Search code examples
highchartspolar-chart

How to calculate the plot band "to"(max) value for a polar triangle shape highchart to set the background color


How can we calculate the plotband "to" value when the y axis series values changes dynamically. We are trying a polar triangle shape polygon chart where we want to set the pane background to gray color but this background color is not setting up when ever we change the series values in the y-axis.

the fiddle for polar chart

But the background color is not coming when we change the series values of y-axis dynamically. So to set the color everytime how can we calculate the from and to values of plotband here. Please help us on how to calculate the to value here.

 plotBands: [{
  from: 0,
  to: 750,
  color: '#f6f8f9'
}

Solution

  • You can adapt the plot band on every data change. For example:

    let allowChartUpdate = true;
    
    const chart = Highcharts.chart('container', {
      "chart": {
        events: {
          redraw: function() {
            if (allowChartUpdate) {
              allowChartUpdate = false;
              const yAxis = this.yAxis[0];
    
              yAxis.update({
                plotBands: [{
                  from: 0,
                  to: yAxis.max,
                  color: '#f6f8f9'
                }]
              });
    
              allowChartUpdate = true;
            }
          }
        },
        ...
      }
      ...
    });
    

    Live demo: https://jsfiddle.net/BlackLabel/czxfndpw/

    API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#update