Gauge series
Highcharts.chart('container', { chart: { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false, height: '80%' }, title: { text: 'Speedometer' }, pane: { startAngle: -90, endAngle: 89.9, background: null, center: ['50%', '75%'], size: '110%' }, // the value axis yAxis: { min: 0, max: 200, tickPixelInterval: 72, tickPosition: 'inside', tickColor: Highcharts.defaultOptions.chart.backgroundColor || '#FFFFFF', tickLength: 20, tickWidth: 2, minorTickInterval: null, labels: { distance: 20, style: { fontSize: '14px' } }, lineWidth: 0, plotBands: [{ from: 0, to: 130, color: '#55BF3B', // green thickness: 20, borderRadius: '50%' }, { from: 150, to: 200, color: '#DF5353', // red thickness: 20, borderRadius: '50%' }, { from: 120, to: 160, color: '#DDDF0D', // yellow thickness: 20 }] }, series: [{ name: 'Speed', data: [80], tooltip: { valueSuffix: ' km/h' }, dataLabels: { format: '{y} km/h', borderWidth: 0, color: ( Highcharts.defaultOptions.title && Highcharts.defaultOptions.title.style && Highcharts.defaultOptions.title.style.color ) || '#333333', style: { fontSize: '16px' } }, dial: { radius: '80%', backgroundColor: 'gray', baseWidth: 12, baseLength: '0%', rearLength: '0%' }, pivot: { backgroundColor: 'gray', radius: 6 } }] }); // Add some life setInterval(() => { const chart = Highcharts.charts[0]; if (chart && !chart.renderer.forExport) { const point = chart.series[0].points[0], inc = Math.round((Math.random() - 0.5) * 20); let newVal = point.y + inc; if (newVal < 0 || newVal > 200) { newVal = point.y - inc; } point.update(newVal); } }, 3000);
CoreGauges
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