How to create a gradient effect for minorTick marks in Highcharts?

Question

I am currently working with Highcharts to create a gauge chart, and I would like to apply a gradient effect to the minorTick marks along the yAxis. Specifically, I want the minorTick marks to start with a certain color (e.g., black) and gradually transition to another color (e.g., red) across the gauge.

below is my options values for highchart : const options = { chart: { type: 'gauge', plotBackgroundColor: 'white', plotBorderWidth: 0, plotShadow: false, height: '200px', }, title: { text: title, verticalAlign: 'bottom', align: 'center', style: { color: '#414D55', fontSize: '11px', fontWeight: 'bold' } }, pane: { startAngle: -130, endAngle: 130, center: ['50%', '75%'], size: '160px',
background: null, }, yAxis: { min, max, minorTickInterval: 'auto', minorTickLength: 2, minorTickPosition: 'inside', tickInterval: tickInterval, tickLength: 2, tickWidth: 0, offset: -24, labels: { distance: -12, style: { fontSize: '10px', } }, lineWidth: 0, plotBands: plotBands },

    series: [
        {

            name: '',
            data: [min],
            tooltip: {
                valueSuffix: '',
                visible: false
            },
            dataLabels: {
                enabled: false
            },
            // needle configuration 
            dial: {
                radius: '70%', 
                backgroundColor: '#414D55',
                baseWidth: 2.7,  
                baseLength: '0%',
                rearLength: '0%',
                length: 0,
                zIndex: 23
            },

            // needle with circle
            pivot: {
                backgroundColor: '#414D55',
                radius: 1.2,
                length: 0,
                zIndex: 230
            },
            states: {
                hover: {
                    enabled: false,
                }
            }
        }]
};

i want the gradient effect in minor tick mark. it should start with black colour and end with red colour. Effect should look like it's turning black to red with opacity change.

Answer 1

This is not available straight from the API and will require to add a custom function.

Here's a simplified chart configuration with the function you can base on:

Highcharts.chart('container', {
  chart: {
    type: 'gauge',
    events: {
      load: function() {
        let chart = this,
          yAxis = chart.yAxis[0],
          key, minorTick, color, ratio;

        function interpolateColor(color1, color2, factor) {
          let result = color1.slice();
          for (let i = 0; i < 3; i++) {
            result[i] = Math.round(result[i] + factor * (color2[i] - color1[i]));
          }
          return 'rgb(' + result.join(',') + ')';
        }  

        for (key in yAxis.minorTicks) {
          minorTick = yAxis.minorTicks[key];
          ratio = minorTick.pos / yAxis.max;

          color = interpolateColor([0, 0, 0], [255, 0, 0], ratio);

          minorTick.mark.attr({
            stroke: color
          });
        }
      }
    }
  },
  yAxis: {
    min: 0,
    max: 100,
  },
  series: [{
    data: [80]
  }]
});

Demo: https://jsfiddle.net/BlackLabel/dzpkqo29/