Highcharts Box Plot Chart Example

Posted On : 24 Aug 2016

Total Views : 1277

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

Topics Covered

Search Terms

Box Plot Chart

Highcharts Box Plot Chart Example

Example

Output

Share this example

Topics Covered

Search Terms