Pie with monochrome fill
// Data retrieved from https://netmarketshare.com/ // Make monochrome colors const colors = Highcharts.getOptions().colors.map((c, i) => // Start out with a darkened base color (negative brighten), and end // up with a much brighter color Highcharts.color(Highcharts.getOptions().colors[0]) .brighten((i - 3) / 7) .get() ); // Build the chart Highcharts.chart('container', { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: 'Browser market shares in February, 2022' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, accessibility: { point: { valueSuffix: '%' } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', colors, borderRadius: 5, dataLabels: { enabled: true, format: '<b>{point.name}</b><br>{point.percentage:.1f} %', distance: -50, filter: { property: 'percentage', operator: '>', value: 4 } } } }, series: [{ name: 'Share', data: [ { name: 'Chrome', y: 74.03 }, { name: 'Edge', y: 12.66 }, { name: 'Firefox', y: 4.96 }, { name: 'Safari', y: 2.49 }, { name: 'Internet Explorer', y: 2.31 }, { name: 'Other', y: 3.398 } ] }] });
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