score:0

Accepted answer

You can create a custom legend by using the SVERenderer tool on the render callback.

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

  render() {
    let chart = this,
                    colors = ['#003975', '#F9BD50', '#3FA27E']

    chart.series[1].points.forEach((p,i) => {
      if (p.category === 0) {
                    if (p.customRect) {
                        p.customRect.destroy();
                    }
        p.customRect = chart.renderer.rect(chart.plotSizeX + chart.plotLeft + 10, 100 + i * 50, 20, 20, 5)
          .attr({
            fill: colors[i],
            zIndex: 3
          })
          .add();
                    if (p.customText) {
                        p.customText.destroy();
                    }   
                    p.customText = chart.renderer.label(p.t, chart.plotSizeX + chart.plotLeft + 40, 100 + i * 50).add()
      }
    })
  }

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

API: https://api.highcharts.com/highcharts/chart.events.render


Related Query

More Query from same tag