score:1

Inside events chart.events.load you can also update style for specific data labels.

   events: {
      load: function() {
        let chart = this;
        chart.series[0].data[0].update({
          dataLabels: {
            useHTML: true,
            style: {
              fontSize: '20px',
              color: 'red',
            }
          }
        })
      }
    }

https://jsfiddle.net/BlackLabel/vnbxf64a/

Other options is change properties format and add breaks, to customize the text truncation in data tables you have the option to add extra CSS styles in line.

  dataLabels: {
    useHTML: true,
    format: '<p class="truncate"><b>{point.name}</b></br>{point.y}</p>',
    style: {
      fontSize: '20px',
      color: 'red',
      textOverflow: 'ellipsis'
    }
  }

.truncate {
    width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 5px 0;
} 

https://jsfiddle.net/BlackLabel/vnbxf64a/1/

Try use alignTo: 'plotEdges', they set label touches the nearest vertical edge of the plot area, but I'm not sure how exactly you want to align the labels. https://api.highcharts.com/highcharts/series.pie.dataLabels.alignTo


Related Articles