Search code examples
reactjshighchartsgauge

How to change tick and minorTick color in different interval in highcharts gauge charts

I am using gauge chart of highchart. I want to change color of tick in intervals. If I use tickColor and minorTickColor then it changes in whole range.

I used minorTickColor and tickColor but don't know how to give different color in different ranges.

 yAxis:{
            min: 0,
            max: 200,

            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 10,
            minorTickPosition: 'inside',

            minorTickColor:'blue',



            tickPixelInterval: 30,
            tickWidth: 2,
            tickPosition: 'inside',
            tickLength: 12,
            tickColor: 'red',
            labels: {
                step: 2,
                rotation: 'auto'
            },
            title: {
                text: 'km/h'
            },
            plotBands: [{

                from: 0,
                to: 120,
                className: 'green-band',
            // green
            }, {
                from: 120,
                to: 160,

                className: 'yellow-band' // yellow
            }, {
                from: 160,
                to: 200,
                className: 'red-band' // red
            }]

        },
Solution

  • There aren't ranges for axis ticks in Highcharts. However, you can achieve it by looping through ticks collection and changing each tick attribute when it position meets the requirements. Check demo and code posted below.

    Code:

    chart: {
  ...
  events: {
    load: function() {
      var chart = this,
        yAxis = chart.yAxis[0],
        key, tick, minorTick;

      for (key in yAxis.ticks) {
        tick = yAxis.ticks[key];

        if (tick.pos < 120) {
          tick.mark.attr({
            stroke: 'red'
          });
        } else if (tick.pos >= 120 && tick.pos < 160) {
          tick.mark.attr({
            stroke: 'green'
          });
        } else if (tick.pos >= 160) {
          tick.mark.attr({
            stroke: 'yellow'
          });
        }
      }

      for (key in yAxis.minorTicks) {
        minorTick = yAxis.minorTicks[key];

        if (minorTick.pos < 120) {
          minorTick.mark.attr({
            stroke: 'orange'
          });
        } else if (minorTick.pos >= 120 && minorTick.pos < 160) {
          minorTick.mark.attr({
            stroke: 'tomato'
          });
        } else if (minorTick.pos >= 160) {
          minorTick.mark.attr({
            stroke: 'blue'
          });
        }
      }
    }
  }
}

    Demo:

    API reference: