score:1

Accepted answer

Try to use this approach:

  yAxis: {
    labels: {
      events: {
        click: function() {
          const chart = this.chart;
          const axis = this.axis;
          const labelPos = this.pos;
          const tick = axis.ticks[labelPos]
          const x = chart.marginRight;
          const width = tick.slotWidth;
          const height = axis.height / (axis.tickPositions.length);
          const y = axis.top + labelPos * height;

          chart.renderer
            .rect(x, y, tick.slotWidth, height)
            .attr({
              fill: 'yellow',
              zIndex: 0
            })
            .add();
        }
      }
    }
  },

I hope that everything is clear from the code - in case of any doubts feel free to ask.

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

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect


Related Articles