How do I add text in the center of a radial chart and/or align the dataLabels to the end of the bars?

Question

The code for the simple radial chart I have so far: https://jsfiddle.net/du4jxzwn/20/

       series: {
            dataLabels: {
                enabled: true,
                align: 'right',
                color: '#FFFFFF',
                x: -10,
                rotation: '270',
            },
            pointPadding: 0.025,
            groupPadding: 0
        }

I want the text to align to the end of the bar. I also want to add some text in the center of the chart, as shown here. Is there any way to do this using Javascript?

BTW, you can move elements using CSS since this is a SVG graph. For example: `.highcharts-axis-labels.highcharts-xaxis-labels.highcharts-radial-axis-labels { transform: translate(100px, 10px);}` — IT goldman, Jun 21 '22 at 08:06

score 0 · Answer 1 · answered Jun 21 '22 at 10:31

Inside the series if you save the point as an object you can edit the dataLabels parameter there and align it.

  series: [{
    data: [{
      x: 0,
      y: 29.9,
      dataLabels: {
        enabled: true,
        allowOverlap: true,
        format: 'Financal',
        color: '#000',
        rotation: '280',
        x: 2,
        y: 15
      }
    }, {
      x: 1,
      y: 71.5
    }, {
      x: 2,
      y: 106.4
    }]
  }]

You can also edit points via events like here and execute the update method on them to change something e.g. the value.

events: {
  load: function() {

    let chart = this,
      series = chart.series[0],
      point = series.data[0],
      dataLabel = point.dataLabel;

    console.log(point);

    point.update({
      y: 33,
    })
  },
},

Demo: https://jsfiddle.net/BlackLabel/kjfn5pvc/1/

How do I add text in the center of a radial chart and/or align the dataLabels to the end of the bars?

1 Answers1