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 Donut Chart Example
Keywords : Highcharts donut chart with colors example, Highcharts rotate pie donut chart with example, How to draw donut chart using highcharts with example
Example
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Highcharts Donut 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 colors = Highcharts.getOptions().colors, categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'], data = [{ y: 56.33, color: colors[0], drilldown: { name: 'MSIE versions', categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0', 'MSIE 10.0', 'MSIE 11.0'], data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13], color: colors[0] } }, { y: 10.38, color: colors[1], drilldown: { name: 'Firefox versions', categories: ['Firefox v31', 'Firefox v32', 'Firefox v33', 'Firefox v35', 'Firefox v36', 'Firefox v37', 'Firefox v38'], data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02], color: colors[1] } }, { y: 24.03, color: colors[2], drilldown: { name: 'Chrome versions', categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0', 'Chrome v33.0', 'Chrome v34.0', 'Chrome v35.0', 'Chrome v36.0', 'Chrome v37.0', 'Chrome v38.0', 'Chrome v39.0', 'Chrome v40.0', 'Chrome v41.0', 'Chrome v42.0', 'Chrome v43.0' ], data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, 5, 4.32, 3.68, 1.45], color: colors[2] } }, { y: 4.77, color: colors[3], drilldown: { name: 'Safari versions', categories: ['Safari v5.0', 'Safari v5.1', 'Safari v6.1', 'Safari v6.2', 'Safari v7.0', 'Safari v7.1', 'Safari v8.0'], data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56], color: colors[3] } }, { y: 0.91, color: colors[4], drilldown: { name: 'Opera versions', categories: ['Opera v12.x', 'Opera v27', 'Opera v28', 'Opera v29'], data: [0.34, 0.17, 0.24, 0.16], color: colors[4] } }, { y: 0.2, color: colors[5], drilldown: { name: 'Proprietary or Undetectable', categories: [], data: [], color: colors[5] } }], browserData = [], versionsData = [], i, j, dataLen = data.length, drillDataLen, brightness; // Build the data arrays for (i = 0; i < dataLen; i += 1) { // add browser data browserData.push({ name: categories[i], y: data[i].y, color: data[i].color }); // add version data drillDataLen = data[i].drilldown.data.length; for (j = 0; j < drillDataLen; j += 1) { brightness = 0.2 - (j / drillDataLen) / 5; versionsData.push({ name: data[i].drilldown.categories[j], y: data[i].drilldown.data[j], color: Highcharts.Color(data[i].color).brighten(brightness).get() }); } } var chartype = { type: 'pie' } var chartitle = { text: 'Browser market share, January, 2015 to May, 2015' } var chartsubtitle = { text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>' } var chartooltip = { valueSuffix: '%' } var chartyaxis = { title: { text: 'Total percent market share' } } var chartplotoptions = { pie: { shadow: false, center: ['50%', '50%'] } } var chartseries = [{ name: 'Browsers', data: browserData, size: '60%', dataLabels: { formatter: function () { return this.y > 5 ? this.point.name : null; }, color: '#ffffff', distance: -30 } }, { name: 'Versions', data: versionsData, size: '80%', innerSize: '60%', dataLabels: { formatter: function () { // display only if larger than 1 return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null; } } }] $('#container').highcharts({ chart:chartype, title: chartitle, subtitle:chartsubtitle, tooltip: chartooltip, yAxis:chartyaxis, 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