Pie Chart

HTML
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
CSS
span { color:#7b7b7b; }
JAVASCRIPT
$(function () { $('#container').highcharts({ chart: { backgroundColor:'#f5f1e8', type: 'pie' }, colors:['#ff922d','#ff4c4f','#00b572','#a38af2','#0096a7'], credits:{ enabled: false }, legend:{ align: 'right', itemMarginTop:40, layout: 'vertical', symbolHeight: 12, symbolPadding: 35, symbolWidth: 12, symbolRadius: 6, verticalAlign: 'middle', useHTML:true }, title: { text: '<span>Dashboard Pie Chart</span>', useHTML:true }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, borderWidth:3, cursor: 'pointer', showInLegend: true, dataLabels: { enabled: false } } }, series: [{ name: 'Brands', data: [{ name: '<span>Lorem Ipusm</span>', y: 40.33 }, { name: '<span>Sit amet lorem</span>', y: 30.03 }, { name: '<span>Amet sit lorem</span>', y: 20.38 }, { name: '<span>Sit amet lorem</span>', y: 15.77 }, { name: '<span>Amet sit lorem</span>', y: 12.91 }] }] }); });
Expand for more options Login