Search code examples
javascripthighchartslabel

Highcharts Pie/Donut Chart highlighting and aligning labels


I have an pie chart with data labels, that are directly at the point and show the value and name of it. But I got some issues I couldn't solve, even after hours of trying and googling.

  • I want to let one label stand out, by increasing the font size. I managed it through using the formatter and adding an inline-style, but I don't know if there is an easier/better solution.
  • In some cases the labels might be overflowing, so the get cropped. Thats alright, but if the text has multiple words, I would like to do a break before cropping the text.
  • All labels that are on the left side of the pie should be text-aligned right and on the right side text-aligned left. So that they are always aligning towards the center. I haven't even figured out a way to change the text-alignment at all.

I created a small JSFiddle: https://jsfiddle.net/x503prs6/54/

Thanks for reading and all your help!


Solution

  • 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