Target Design of PIE HighChart with custom colors

by Faisal Khan Janjua

HTML

<script src="https://code.highcharts.com/js/highcharts.js"></script>

<div id="container"></div>

<span data-val="https://stackoverflow.com/questions/28248855/rotating-datalabels-in-a-highcharts-pie-chart">for rotating labels</span>

CSS

@import 'https://code.highcharts.com/css/highcharts.css';

#container {
	height: 400px;
	max-width: 800px;
	min-width: 320px;
	margin: 0 auto;
}
.highcharts-pie-series .highcharts-point {
	stroke: #EDE;
	stroke-width: 2px;
}
.highcharts-pie-series .highcharts-data-label-connector {
	stroke: silver;
	stroke-dasharray: 2, 2;
	stroke-width: 2px;
}
.highcharts-pie-series .highcharts-point {
    stroke: #EDE;
    stroke-width: 0;
}
.highcharts-data-label text, text.highcharts-data-label {
    fill: #FFF;
    font-size: 12px;
    font-weight: normal;
}
/* .highcharts-data-label {
} */

JavaScript

Highcharts.setOptions({
  colors: ['#414042', '#58595b', '#f15f36', '#94c03d']
});
var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    backgroundColor: '#f9f9f9',
    type: 'line'
  },
  title: {
    text: 'Shareholders',
    align: 'left'
  },
  tooltip: {
    pointFormat: '{series.name}: <br><b>{point.percentage:.1f}%</b>',

  },
  plotOptions: {
    pie: {
      dataLabels: {
        color: 'white',
        distance: -50,
        textShadow: false ,
        format: '{point.percentage:.1f}%',
      },
      borderWidth: 0,
    }
  },
  series: [{
    type: 'pie',
    allowPointSelect: false,
    keys: ['name', 'y'],
    data: [
      ['Apples', 29.9],
      ['Pears', 71.5],
      ['Oranges', 106.4],
      ['Plums', 129.2],
      ['Bananas', 144.0],
      ['Peaches', 176.0],
      ['Prunes', 135.6],
      ['Avocados', 148.5]
    ],
    showInLegend: false
  }]
});