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.
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!
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