You are on page 1of 3

I am creating a HighCharts pie chart and want finer styling control over each sl ice -- I want light slices

to have dark dataLabels and vice versa. So, I want to be able to style the slices using my style.css file. I've inserted a class name (slice) in the dataLabels setup, plus a custom function to cycle t hrough all my slices and give them unique classes: function colorSlices(chart) { var count = 1; $(".slice").each(function(){ $(this).addClass("slice-"+count); count++; }); }; var chart; $(document).ready(function() { // Build the chart chart = new Highcharts.Chart({ credits: { enabled: false }, chart: { renderTo: 'container', exporting: { enabled: false }, events: { redraw: function(event) { colorSlices(); } }, plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, shadow: true }, tooltip: { pointFormat: '', percentageDecimals: 1 }, legend: { useHTML: true, align: 'right', verticalAlign: 'middle', itemWidth: 260, borderColor: '#fff', width: 260, labelFormatter: function() { return '<div class="legend-item">' + this.name +'</div>'; } }, title: { text: "" }, plotOptions: { pie: { allowPointSelect: true, size:'100%', cursor: 'pointer',

showInLegend: true, shadow: true, dataLabels: { enabled: true, distance: -40, useHTML: true, style: { width: '100px' }, color: '#fff', connectorColor: '#000000', formatter: function() { return '<span class="slice">' + Highcharts.numberFor mat(this.percentage,1,".",",") +' %</span>'; } } } }, series: [{ type: 'pie', name: 'Income Investments', data: [ ['Other Industries', 19.3], ['Media', 16.0], ['Materials', 13.6], ['Software & Services', 10.2], ['Retailing', 7.9], ['Capital Goods', 6.5], ['Healthcare Equipment & Services', 6.0], ['Insurance', 5.7], ['Technology Hardware & Equipment', 5.4], ['Consumer Services', 4.8], ['Telecommunication Services', 4.7] ] }], colors: [ '#132f55', '#4d6d8a', '#7f95aa', '#b2bfcb', '#d1dae2', '#e5eaef', '#7f7f7f', '#9e9e9e', '#c9c9c9', '#bcbdc0', '#eeefef' ] }); })

------------------------------------------$('#container').highcharts({ chart: {

plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: 'Browser market shares at a specific website, 2010' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', format: '<b>{point.name}</b>: {point.percentage:.1f} %' } } }, series: [{ type: 'pie', data: cols }] }); });

You might also like