Column, line and pie
// Data retrieved from https://www.ssb.no/energi-og-industri/olje-og-gass/statistikk/sal-av-petroleumsprodukt/artikler/auka-sal-av-petroleumsprodukt-til-vegtrafikk Highcharts.chart('container', { title: { text: 'Sales of petroleum products March, Norway' }, xAxis: { categories: [ 'Jet fuel', 'Duty-free diesel', 'Petrol', 'Diesel', 'Gas oil' ] }, yAxis: { title: { text: 'Million liters' } }, tooltip: { valueSuffix: ' million liters' }, plotOptions: { series: { borderRadius: '25%' } }, series: [{ type: 'column', name: '2020', data: [59, 83, 65, 228, 184] }, { type: 'column', name: '2021', data: [24, 79, 72, 240, 167] }, { type: 'column', name: '2022', data: [58, 88, 75, 250, 176] }, { type: 'line', step: 'center', name: 'Average', data: [47, 83.33, 70.66, 239.33, 175.66], marker: { lineWidth: 2, lineColor: Highcharts.getOptions().colors[3], fillColor: 'white' } }, { type: 'pie', name: 'Total', data: [{ name: '2020', y: 619, color: Highcharts.getOptions().colors[0], // 2020 color dataLabels: { enabled: true, distance: -50, format: '{point.total} M', style: { fontSize: '15px' } } }, { name: '2021', y: 586, color: Highcharts.getOptions().colors[1] // 2021 color }, { name: '2022', y: 647, color: Highcharts.getOptions().colors[2] // 2022 color }], center: [75, 65], size: 100, innerSize: '70%', showInLegend: false, dataLabels: { enabled: false } }] });
CoreCombinations
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