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:


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
              .rect(x1, y, width, height)
                stroke: 'red',
                'stroke-width': 2,
                zIndex: 3,
            // TEXT
              .text(text, x1 + width / 2, y)
                align: 'center',
                zIndex: 4,
                fontSize: '15px'


API Reference:

Related Articles