Take the 2-minute tour ×

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/

            height: 300,
            width: 400
        credits:{enabled: false},
            '#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]
share|improve this question
add comment

1 Answer

up vote 3 down vote accepted

You should set float:left; for both divs inside legend.


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>';
share|improve this answer
Thank You!!! I wasn't floating them, that's an amateur mistake on my part, this has certainly helped my day i'll tell you! –  Nick G Apr 26 '13 at 12:22
One last thing that I was hoping to do was to total the Y values at the end of the legend on the right side only. If either of you could help me with something like that it would be greatly appreciated, but I understand if you don't know the approach! Thanks again –  Nick G Apr 26 '13 at 13:18
add comment

Your Answer


