box plots with line markers

by jlbriggs

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="width:500px;height:400px;margin:1.5em 1em;"></div>

<script>
var d          = new Date();
var pointStart = d.getTime();
Highcharts.setOptions({
    global: {
        useUTC:false
    },
    colors: [
        'rgba( 0,   154, 253, 0.9 )', //bright blue
        'rgba( 253, 0,   154, 0.9 )', //bright pink
        'rgba( 154, 253, 0,   0.9 )', //bright green
        'rgba( 253, 99,  0,   0.9 )', //bright orange
        'rgba( 145, 44,  138, 0.9 )', //mid purple
        'rgba( 45,  47,  238, 0.9 )', //mid blue
        'rgba( 238, 46,  47,  0.9 )', //mid red
        'rgba( 44,  145, 51,  0.9 )', //mid green
        'rgba( 177, 69,  0,   0.9 )', //dark orange
        'rgba( 103, 16,  192, 0.9 )'  //dark purple
    ],
    chart: {
        alignTicks:false,
        type:'',
        margin:[60,25,100,90],
        //borderRadius:10,
        //borderWidth:1,
        //borderColor:'rgba(156,156,156,.25)',
        //backgroundColor:'rgba(204,204,204,.25)',
        //plotBackgroundColor:'rgba(255,255,255,1)',
        style: {
            fontFamily: 'Abel,serif'
        }
    },
    title: {
        text:'Test Chart Title',
        align:'left',
        margin:10,
        x: 50,
        style: {
            fontWeight:'bold',
            color:'rgba(0,0,0,.9)'
        }
    },
    subtitle: {
        text:'Test Chart Subtitle',   
        align:'left',
        x: 52,
    },
    legend: { enabled: true },
    plotOptions: {
        area: {
            lineWidth:1,
            marker: {
                enabled:false,
                symbol:'circle',
                radius:4
            }
        },
        arearange: {
            lineWidth:1
        },
        areaspline: {
            lineWidth:1,
            marker: {
               ...

CSS

@import url(https://fonts.googleapis.com/css?family=Changa+One|Loved+by+the+King|Fredericka+the+Great|Droid+Serif:400,700,400italic|Abel|Oswald:400,300,700);

body {
    font-family:Abel, Calibri, Helvetica, sans-serif;
    font-size:95%;
}

JavaScript

//------------------------------------------------------
//define a horizontal and vertical line marker symbol type
Highcharts.Renderer.prototype.symbols.vline = 
    function(x, y, width, height) {
        return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
};
Highcharts.Renderer.prototype.symbols.hline = 
    function(x, y, width, height) {
        return ['M',x ,y + height / 2,'L',x+width,y + width / 2];
};
//------------------------------------------------------

var chart;
$(function() {
    $('#container').highcharts({
        chart       : { type    : 'boxplot' },
        title       : { },
        subtitle    : { },
        legend      : { enabled : true },
        tooltip     : { },
        plotOptions : {
            series  : {
                pointStart      : pointStart,
                pointInterval   : 60 * 1000,
            },
            boxplot: {
                pointPadding    : 0.2,
                fillColor:'rgba(204,204,204,.25)',
                color:'rgba(0,0,0,1)',
                lineWidth:0.5,
                medianWidth:0.5,
                whiskerWidth:0.5
            }
        },
        xAxis      : { type     : 'datetime' },
        yAxis      : { title    : { text : '' } }
    });	
    chart = $('#container').highcharts();

    //box plot series
    chart.addSeries({ 
        name:'Box Plot Values',
        data: [
            [5,10,20,25,50],
            [7,15,22,27,42],
            [10,17,25,30,45],
            [3,9,20,23,40],
            [12,20,23,40,45],
            [3,9,20,23,40],
            [5,7,13,21,30]
        ] 
    });
    //line marker series
    chart.addSeries({ 
        name: 'Line Marker Values',
        type:'scatter',
        marker: {
            symbol:'hline',
            lineWidth:2,
            lineColor:'rgba(253,0,154,0.9)',
            radius:12
        },
        data: [32,35,37,28,42,35,27]
    });

})