Monday, 6 June 2016

javascript - Highcharts - Display legend for Pie chart in two columns

I have been using Highcharts(v2.1.9) to generate some pie charts. The charts are generated quite well, however I am having some problems with displaying the legend.



The legend shows in vertical view, but instead of all the legend items showing, some are hidden. I believe this is due to the navigation option being automatically enabled, which pages all of the other legend items that do not fit within the container.



Instead of paging the rest of the legend items, I want to show them in a second column, side by side with the first column.



This data is dynamic so the number of legend items/pie sectors may change over time. The solution must be able to handle more than two columns if the sectors increase.



I think one way to turn off the navigation option is to use the useHTML: true option but I haven't been able to style it in the way that I want.



Here is the fiddle: http://jsfiddle.net/7fb3x9ys/



$(function () {

$(document).ready(function () {

// Build the chart
$('#container').highcharts({

chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
borderWidth: 0,
width: 800,
height: 280
},
credits: {
enabled: false
},
legend: {
borderWidth: 0,
labelFormatter: function() {
var total = 0, percentage;


$.each(this.series.data, function() {
total+=this.y;
});
percentage=((this.y/total)*100).toFixed(2);
return ''+ this.name + '
'+percentage+'%';
},
verticalAlign: 'middle',
x:185,
y:0,
layout: 'vertical',
width: 600,
height:280,
itemWidth: 600,
symbolWidth: 7,
symbolHeight: 28

},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size: 275,
center: ["16%", "50%"],
dataLabels: {
enabled: false,
},
showInLegend: true,
minSize: 130,
colors: [
'#7DA0B0',
'#9264AA',
'#4F2A72',
'#9A3968',
'#BF5269',
'#E16553',
'#E3985E',
'#E4BF80',
'#75C494',
'#52584B'
]
}
},
series: [{
type: 'pie',
name: 'Sector',
data:{"data":[["ENERGY",17.4],["FINANCIALS",15.1],["CONSUMER STAPLES",14.9],["UTILITIES",14.88],["MATERIALS",7.59],["REAL ESTATE",7.24],["TELECOMMUNICATION SERVICES",7.08],["CONSUMER DISCRETIONARY",6.95],["INDUSTRIALS",5.28],["HEALTH CARE",2.64],["CASH",0.95]]}.data
}]


});
});

});


I want to thank all responses in advance. I have been stuck on this for a few days now and any help would be greatly appreciated.

No comments:

Post a Comment

c++ - Does curly brackets matter for empty constructor?

Those brackets declare an empty, inline constructor. In that case, with them, the constructor does exist, it merely does nothing more than t...