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 with Gradient Fill Chart Example
Keywords : Create pie chart with gradient fill using highcharts with example, Pie with gradient fill options using highcharts example, Apply gradient fill options on pie chart using highcharts
Example
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Highcharts Pie with gradient fill 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 () { // Radialize the colors Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) { return { radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 }, stops: [ [0, color], [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken ] }; }); 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' }, connectorColor: 'silver' } } } var chartseries = [{ name: 'Brands', 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