Pie with gradient fill
// eslint-disable-next-line max-len // Data retrieved from https://www.ssb.no/en/transport-og-reiseliv/landtransport/statistikk/bilparken // Radialize the colors Highcharts.setOptions({ colors: Highcharts.getOptions().colors.map(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 ] }; }) }); // Build the chart Highcharts.chart('container', { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: 'Registered private vehicles in Norway, by type of fuel, 2020' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, accessibility: { point: { valueSuffix: '%' } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<span style="font-size: 1.2em"><b>{point.name}</b>' + '</span><br>' + '<span style="opacity: 0.6">{point.percentage:.1f} ' + '%</span>', connectorColor: 'rgba(128,128,128,0.5)' } } }, series: [{ name: 'Share', data: [ { name: 'Petrol', y: 938899 }, { name: 'Diesel', y: 1229600 }, { name: 'Electricity', y: 325251 }, { name: 'Other', y: 238751 } ] }] });
CorePie charts
Install with NPM
The official Highcharts NPM package comes with support for CommonJS and contains Highcharts, and its Stock, Maps and Gantt packages.
npm install highcharts --save
See more installation optionsDownload our library
The zip archive contains Javascript files and examples. Unzip the zip package and open index.html in your browser to see the examples.
DownloadBuy a license
You can download and try out all Highcharts products for free. Once your project/product is ready for launch, purchase a commercial license.
See License Pricing