Line styles
const colors = Highcharts.getOptions().colors; Highcharts.chart('container', { chart: { type: 'spline' }, legend: { symbolWidth: 40 }, title: { text: 'Most common desktop screen readers', align: 'left' }, subtitle: { text: 'Source: WebAIM. Click on points to visit official screen ' + 'reader website', align: 'left' }, yAxis: { title: { text: 'Percentage usage' }, accessibility: { description: 'Percentage usage' } }, xAxis: { title: { text: 'Time' }, accessibility: { description: 'Time from December 2010 to September 2019' }, categories: [ 'December 2010', 'May 2012', 'January 2014', 'July 2015', 'October 2017', 'September 2019' ] }, tooltip: { valueSuffix: '%', stickOnContact: true }, plotOptions: { series: { point: { events: { click: function () { window.location.href = this.series.options.website; } } }, cursor: 'pointer', lineWidth: 2 } }, series: [ { name: 'NVDA', data: [34.8, 43.0, 51.2, 41.4, 64.9, 72.4], website: 'https://www.nvaccess.org', color: colors[2], accessibility: { description: 'This is the most used screen reader in 2019.' } }, { name: 'JAWS', data: [69.6, 63.7, 63.9, 43.7, 66.0, 61.7], website: 'https://www.freedomscientific.com/Products/Blindness/JAWS', dashStyle: 'ShortDashDot', color: colors[0] }, { name: 'VoiceOver', data: [20.2, 30.7, 36.8, 30.9, 39.6, 47.1], website: 'http://www.apple.com/accessibility/osx/voiceover', dashStyle: 'ShortDot', color: colors[1] }, { name: 'Narrator', data: [null, null, null, null, 21.4, 30.3], website: 'https://support.microsoft.com/en-us/help/22798/windows-10-complete-guide-to-narrator', dashStyle: 'Dash', color: colors[9] }, { name: 'ZoomText/Fusion', data: [6.1, 6.8, 5.3, 27.5, 6.0, 5.5], website: 'http://www.zoomtext.com/products/zoomtext-magnifierreader', dashStyle: 'ShortDot', color: colors[5] }, { name: 'Other', data: [42.6, 51.5, 54.2, 45.8, 20.2, 15.4], website: 'http://www.disabled-world.com/assistivedevices/computer/screen-readers.php', dashStyle: 'ShortDash', color: colors[3] } ], responsive: { rules: [{ condition: { maxWidth: 550 }, chartOptions: { chart: { spacingLeft: 3, spacingRight: 3 }, legend: { itemWidth: 150 }, xAxis: { categories: [ 'Dec. 2010', 'May 2012', 'Jan. 2014', 'July 2015', 'Oct. 2017', 'Sep. 2019' ], title: '' }, yAxis: { visible: false } } }] } });
CoreAccessibility
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