0

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'
          }
        },
}
vinamra rathi
  • 3
  • 1

1 Answers1

0

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

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • Hey thanks for the response, but is there any other way apart from using x to align the position? – vinamra rathi May 29 '23 at 07:55
  • Hi @vinamra rathi, May I know why you don't like to use `x` value? The value can be calculated based on some dynamic chart values, like for example `plotLeft`. Other options are `align` and `verticalAlign`: https://api.highcharts.com/highcharts/yAxis.plotBands.label – ppotaczek May 29 '23 at 09:28
  • The reason why I am asking is because for my use case, the way chart is set up, I have to pass negative values for X to align it properly on Y axis. In order to avoid the negative values I am looking for alternative options – vinamra rathi May 29 '23 at 09:52
  • You want to position the label in a custom way, so using `x` attribute is necessary. A label is placed relative to a plot-band area and a more general option to control its position is using the `align` property which can be `right/left/center`. – ppotaczek May 29 '23 at 11:28
  • ack, thanks, I have used x to align the labels – vinamra rathi Jun 02 '23 at 08:28