Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>

CSS

#container {
    min-width: 310px;
    max-width: 800px;
    height: 400px;
    margin: 0 auto
}

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'boxplot'
    },

    title: {
        text: 'Trying to get scatter plot outliers to line up with the box they go with'
    },

    legend: {
        enabled: false
    },

    xAxis: {
        categories: ['1', '2', '3', '4', '5'],
        title: {
            text: 'Experiment No.'
        }
    },

    yAxis: {
        title: {
            text: 'Observations'
        },

    },

    plotOptions: {
        series: {
            grouping: true
        }
    },

    series: [{
            name: 'Group A 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: 'Group B Observations',
            data: [
                [760, 831, 828, 795, 965],
                [733, 883, 939, 980, 1080],
                [714, 762, 827, 890, 918],
                [724, 802, 806, 971, 950],
                [834, 836, 864, 882, 910]
            ],
            tooltip: {
                headerFormat: '<em>Experiment No {point.key}</em><br/>'
            }
        },
        {
            name: 'Group A Outliers',
            color: Highcharts.getOptions().colors[0],
            pointPlacement: 0.15,
            type: 'scatter',
            data: [ // x, y positions where 0 is the first category
                [0, 644],
                [1, 718],
                [2, 951],
                [3, 969],
                [4, 969]
            ],
            marker: {
                fillColor: 'white',
                lineWidth: 1,
                lineColor: Highcharts.getOptions().colors[0]
            },
            tooltip: {
                pointFormat: 'Observation: {point.y}'
  ...