Home
Tutorials
Microsoft Technologies Tutorials
Java Programming Tutorials
Web Designing Tutorials
Script Programming Tutorials
Database Programming Tutorials
Mobile Technologies Tutorials
Other Programming Tutorials
Examples
Articles
Tools
News
Highcharts Pie Chart Example
Keywords : How to create pie chart using highcharts with example, Pie chart example using highcharts, Basic pie chart example using highcharts
Example
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Highcharts Pie Chart</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script type="text/javascript"> $(function () { var chartype = { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' } var chartitle = { text: 'Browser market shares January, 2015 to May, 2015' } var chartooltip = { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' } var chartplotoptions = { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } } var chartseries = [{ name: 'Brands', colorByPoint: true, data: [{ name: 'Microsoft Internet Explorer', y: 56.33 }, { name: 'Chrome', y: 24.03, sliced: true, selected: true }, { name: 'Firefox', y: 10.38 }, { name: 'Safari', y: 4.77 }, { name: 'Opera', y: 0.91 }, { name: 'Proprietary or Undetectable', y: 0.2 }] }] $('#container').highcharts({ chart:chartype, title: chartitle, tooltip: chartooltip, plotOptions: chartplotoptions, series: chartseries }); }); </script> </head> <body> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </body> </html>
Click Here to See Result
Result
Previous
Next