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>

Box Plot Chart

Highcharts Box Plot Chart Example

Example

Output

Share this example