CORE LIBRARY
Live data from dynamic CSV
const defaultData = 'https://demo-live-data.highcharts.com/time-data.csv'; const urlInput = document.getElementById('fetchURL'); const pollingCheckbox = document.getElementById('enablePolling'); const pollingInput = document.getElementById('pollingTime'); function createChart() { Highcharts.chart('container', { chart: { type: 'areaspline' }, title: { text: 'Live Data' }, accessibility: { announceNewData: { enabled: true, minAnnounceInterval: 15000, announcementFormatter: function ( allSeries, newSeries, newPoint ) { if (newPoint) { return 'New point added. Value: ' + newPoint.y; } return false; } } }, plotOptions: { areaspline: { color: '#32CD32', fillColor: { linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, stops: [ [0, '#32CD32'], [1, '#32CD3200'] ] }, threshold: null, marker: { lineWidth: 1, lineColor: null, fillColor: 'white' } } }, data: { csvURL: urlInput.value, enablePolling: pollingCheckbox.checked === true, dataRefreshRate: parseInt(pollingInput.value, 10) } }); if (pollingInput.value < 1 || !pollingInput.value) { pollingInput.value = 1; } } urlInput.value = defaultData; // We recreate instead of using chart update to make sure the loaded CSV // and such is completely gone. pollingCheckbox.onchange = urlInput.onchange = pollingInput.onchange = createChart; // Create the chart createChart();
CoreDynamic 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