HighCharts Pie Chart Legend value alignment
asp-classic, highcharts, jquery
Solution
You should set float:left; for both divs inside legend.
http://jsfiddle.net/hAnCr/25/
labelFormatter: function() {
return '<div style="text-align: left; width:130px;float:left;">' + this.name + '</div><div style="width:40px; float:left;text-align:right;">' + this.y + '%</div>';
Problem
I just want to have my legend have the name value left aligned and the percentage value right aligned, I have worked on this thing for 2 straight days and opened a couple different questions on forums about it and have gotten 0 answers so anyone with any knowledge i'd love your help! thank you very much http://jsfiddle.net/hAnCr/2/ ``` $("document").ready( function(){ $('#container').highcharts({ chart:{ type:'pie', height: 300, width: 400 }, credits:{enabled: false}, colors:[ '#5485BC', '#AA8C30', '#5C9384', '#981A37', '#FCB319', '#86A033', '#614931', '#00526F', '#594266', '#cb6828', '#aaaaab', '#a89375' ], title:{text: null}, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', showInLegend: true, dataLabels: { enabled: false, formatter: function() { return this.percentage.toFixed(2) + '%'; } } } }, legend: { enabled: true, layout: 'vertical', align: 'right', width: 200, verticalAlign: 'middle', useHTML: true, labelFormatter: function() { return '<div style="text-align: left; width:130px;">' + this.name + '</div><div style="width:40px; text-align:right;">' + this.y + '%</div>'; } }, series: [{ type: 'pie', dataLabels: { }, data: [ ['Domestic Equity', 38.5], ['International Equity', 26.85], ['Other', 15.70], ['Cash and Equivalents', 10.48], ['Fixed Income', 8.48] ] }] }); }); ```