Box and whisker

by rafiu

HTML

<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>

<div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>

JavaScript

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'boxplot'
        },

        title: {
            text: 'Highcharts Box Plot Example'
        },

        legend: {
            enabled: true
        },

        xAxis: {
            
            title: {
                text: 'Experiment No.'
            }
        },

        yAxis: {
            title: {
                text: 'Observations'
            }
        },
      
        series: [{
            name: 'Observations',
            pointWidth:100,
            data: [
                {x:1,low:760,q1: 801,median: 848,q3: 895,high: 965},
                {x:2,low:733,q1: 853,median: 939,q3: 980,high: 1080},
                {x:3,low:714,q1: 762,median: 817,q3: 870,high: 918},
                {x:4,low:724,q1: 802,median: 810,q3: 871,high: 950}
            ],
            tooltip: {
                headerFormat: '<em>Experiment No {point.key}</em><br/>'
            }
        }]

    });
});