Box plot
Highcharts.chart('container', { chart: { type: 'boxplot' }, title: { text: 'Highcharts Box Plot Example' }, legend: { enabled: false }, xAxis: { categories: ['1', '2', '3', '4', '5'], title: { text: 'Experiment No.' } }, yAxis: { title: { text: 'Observations' }, plotLines: [{ value: 932, color: 'red', width: 1, label: { text: 'Theoretical mean: 932', align: 'center', style: { color: 'gray' } } }] }, series: [{ name: 'Observations', data: [ [760, 801, 848, 895, 965], [733, 853, 939, 980, 1080], [714, 762, 817, 870, 918], [724, 802, 806, 871, 950], [834, 836, 864, 882, 910] ], tooltip: { headerFormat: '<em>Experiment No {point.key}</em><br/>' } }, { name: 'Outliers', color: Highcharts.getOptions().colors[0], type: 'scatter', data: [ // x, y positions where 0 is the first category [0, 644], [4, 718], [4, 951], [4, 969] ], marker: { fillColor: 'white', lineWidth: 1, lineColor: Highcharts.getOptions().colors[0] }, tooltip: { pointFormat: 'Observation: {point.y}' } }] });
CoreMore chart types
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