Home
Tutorials
Microsoft Technologies Tutorials
Java Programming Tutorials
Web Designing Tutorials
Script Programming Tutorials
Database Programming Tutorials
Mobile Technologies Tutorials
Other Programming Tutorials
Examples
Articles
Tools
News
Highcharts Box Plot Chart Example
Keywords : Box plot chart using highcharts example, Highcharts boxplot with multiple options tooltip color example, How to use highcharts boxplot chart with example
Example
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Highcharts - Box Plot Chart</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script type="text/javascript"> $(function () { var chartype = { type: 'boxplot' } var chartitle = { text: 'Highcharts Box Plot Example' } var chartlegend = { enabled: false } var chartxaxis = { categories: ['1', '2', '3', '4', '5'], title: { text: 'Experiment No.' } } var chartyaxis = { title: { text: 'Observations' }, plotLines: [{ value: 932, color: 'red', width: 1, label: { text: 'Theoretical mean: 932', align: 'center', style: { color: 'gray' } } }] } var chartplotoptions = { series: { pointStart: 0, pointInterval: 45 }, column: { pointPadding: 0, groupPadding: 0 } } var chartseries = [{ 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: 'Outlier', 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}' } }] $('#container').highcharts({ chart:chartype, title: chartitle, legend:chartlegend, xAxis: chartxaxis, yAxis:chartyaxis, series: chartseries }); }); </script> </head> <body> <div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div> </body> </html>
Click Here to See Result
Result
Previous
Next