score:1

Accepted answer

I found a way how to achieve it. Check the below code which shows how to find the unique x positions for each group and use the renderer tool to render a custom text:

events: {
  load() {
    const chart = this;
    const y = chart.plotTop + chart.title.alignAttr.y;
    chart.renderer.text(
      'Round',
      10, //fixed left-margin
      y
    ).attr({
      zIndex: 5
    }).add()

    setTimeout(function() {
      const xPositions = [...new Set(chart.series[0].nodes.map(node => node.prevX))]

      xPositions.forEach((x, i) => {
        chart.renderer.text(
          i + 1,
          x + chart.plotLeft,
          y
        ).add()
      })
    }, 10)
  }
}

Demo: https://jsfiddle.net/BlackLabel/u02hvz1a/

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


Related Articles