Line chart with 500k points
function getData(n) { const arr = []; let i, x, a, b, c, spike; for ( i = 0, x = Date.UTC(new Date().getUTCFullYear(), 0, 1) - n * 36e5; i < n; i = i + 1, x = x + 36e5 ) { if (i % 100 === 0) { a = 2 * Math.random(); } if (i % 1000 === 0) { b = 2 * Math.random(); } if (i % 10000 === 0) { c = 2 * Math.random(); } if (i % 50000 === 0) { spike = 10; } else { spike = 0; } arr.push([ x, 2 * Math.sin(i / 100) + a + b + c + spike + Math.random() ]); } return arr; } const n = 500000, data = getData(n); console.time('line'); Highcharts.chart('container', { chart: { zooming: { type: 'x' } }, title: { text: 'Highcharts drawing ' + n + ' points', align: 'left' }, subtitle: { text: 'Using the Boost module', align: 'left' }, accessibility: { screenReaderSection: { beforeChartFormat: '<{headingTagName}>' + '{chartTitle}</{headingTagName}><div>{chartSubtitle}</div>' + '<div>{chartLongdesc}</div><div>{xAxisDescription}</div><div>' + '{yAxisDescription}</div>' } }, tooltip: { valueDecimals: 2 }, xAxis: { type: 'datetime' }, series: [{ data: data, lineWidth: 0.5, name: 'Hourly data points' }] }); console.timeEnd('line');
Custom palette
Theme
Color palette
Background
Text
Highlight
CoreLine 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