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?

Answer 1

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/