amparorll
Posts: 4
Joined: Fri Nov 26, 2021 12:58 pm

Highcharts - Display legend for Pie chart in 2 columns but in the same row

Hello,

I'm new using highcharts and I'm struggling with the legend of a Pie chart...
The thing is that the legend is composed by 2 values, the name and the value itself (the numeric percentage) and I want that the numeric percentage appears aligned to the right.
I would like something like the attached image
Pie_legend_example.png
Pie_legend_example.png (8.49 KiB) Viewed 473 times
This is a piece of my code where I'm trying to solve it

var legend = {
enabled: true,
useHTML: true,
borderWidth: 0,
x: 0,
y: 15,
verticalAlign: 'left',
layout: 'vertical',
align: 'left',
itemMarginBottom: 5,
floating: true,
width: 550,
itemStyle: { width: 340, fontSize: "11px", textOverflow: null },
labelFormatter: function () {
return '<div class="container-fluid"> ' +
'<div class="row"> ' +
'<div class="col">' + this.name + '</div>' +
'<div class="col">' + this.percentage.toFixed(2).toString() + "%" + '</div>' +
'</div>' +
'</div>';
}
};

And this is the result of the above code
pie_legend_wrong.png
pie_legend_wrong.png (9.93 KiB) Viewed 473 times
Is there any way to do what I want?
Thanks in advance
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Highcharts - Display legend for Pie chart in 2 columns but in the same row

Hi,

Thanks for contacting us with your question!

When you are using HTML (useHTML: true) you can just add styles to your div:

Code: Select all

{
	display: flex;
	width: 150px;
	justify-content: space-between;
}

This way you can achieve what you want.

Demo: https://jsfiddle.net/BlackLabel/m69x3od2/

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”