How to Align Text on Y axis and in the middle of plotBand in HighCharts

Question

I am trying to align the Y axis labels in the center of the plotBand but on the Y axis. Here what I have tried. I have given the label to plotBand and aligned it on Y axis. I am trying to find alternate solution that dynamically align the value on Y axis instead of setting the negative values of X inside the label.

plotBand: {
label: {
          text: 'Y axis Value 1',
          align: 'left',
          x: -95,
          style: {
            color: '#333'
          }
        },
}

Answer 1

A plot-band always takes all axis width/height, so using the x and y properties doesn't seem to be a bad idea for positioning.

However, you can access the specific plot-band in some chart's event and position it dynamically by using attr method. For example:

  chart: {
    ...,
    events: {
      render: function() {
        const chart = this;

        chart.yAxis[0].plotLinesAndBands[0].label.attr({
          x: chart.plotLeft
        });
      }
    }
  }

---

Live demo: http://jsfiddle.net/BlackLabel/gwnxfy91/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr