8/13/2019 Color Slice

1/3

I am creating a HighCharts pie chart and want finer styling control over each slice -- 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 through 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 '' + this.name +'';

} }, title: { text: "" }, plotOptions: { pie: { allowPointSelect: true, size:'100%', cursor: 'pointer',

8/13/2019 Color Slice

2/3

showInLegend: true, shadow: true, dataLabels: { enabled: true, distance: -40, useHTML: true, style: { width: '100px' }, color: '#fff', connectorColor: '#000000', formatter: function() { return '' + Highcharts.numberFormat(this.percentage,1,".",",") +' %'; } } } }, 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: {

8/13/2019 Color Slice

3/3

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

data: cols }]

});

});