score:1

Accepted answer

Depending on what would you like to achieve, you can use the annotations module or Renderer API to draw labels on the chart. I suppose you can also use the xAxis.blotBands in this case. Check the following docs for getting more information:

Docs: https://www.highcharts.com/docs/advanced-chart-features/annotations-module https://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines

Here is an example code of rendered rectangle with text:

chart: {
        events: {
          render: function() {
    
            let chart = this,
              x1 = chart.xAxis[0].toPixels(0),
              x2 = chart.xAxis[0].toPixels(25),
              width = x2 - x1,
              height = chart.plotSizeY,
              y = chart.yAxis[0].toPixels(0) - height,
              text = 'My text';
    
            // RECTANGLE
            chart.renderer
              .rect(x1, y, width, height)
              .attr({
                stroke: 'red',
                'stroke-width': 2,
                zIndex: 3,
              })
              .add();
    
            // TEXT
            chart.renderer
              .text(text, x1 + width / 2, y)
              .attr({
                align: 'center',
                zIndex: 4,
              })
              .css({
                fontSize: '15px'
              })
              .add();
          }
        }
      },

Demo: https://jsfiddle.net/BlackLabel/3nqjwha5/

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


Related Articles