CODEWITHSUNDEEP
highcharts
Mark1234
Mark1234

Reputation: 619

Add extra labels to line charts

I have a line chart that has 100 points on X Axis, each 25 points need to be labels separately. Its like there are 4 rectangles in the chart conceptually each covering 25 points. How can i put a label in this example on each rectangle. I have not found anything in the API that seems to support this.

Upvotes: 0

Views: 224

Answers (1)

magdalena
magdalena

Reputation: 3695

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

Upvotes: 1

Related Questions