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 with Legends Example
Keywords : Highcharts pie chart legend with values example, How to draw pie chart with legends using highcharts example, How to use legends with highcharts pie chart example
Example
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Highcharts Pie with legend 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: false }, showInLegend: true } } 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