Range

Line with range area

by jlbriggs

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height:400px;"></div>

JavaScript

var chart;
Highcharts.setOptions({
    colors: ['#cccccc','#cccccc']
});

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'area',
        marginTop:35,
        marginRight:50,
        marginLeft:110,
        marginBottom:25,
        backgroundColor:'#fff',
        borderWidth:0,
        borderColor:'#ddd',
        plotBackgroundColor:'#fff',
        plotBorderWidth:0,
        plotBorderColor:'#eee',
    },
    credits:{
        enabled:false
    },
    title: {
        text: 'Range and Mean',
        x: -20 //center
    },
    tooltip: {
        borderWidth:1,
        formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                this.x +': '+ this.y +'days';
        }
    },
    legend: {
        layout:'vertical',
        align:'right',
        verticalAlign:'middle',
        x:0,
        y:0,
        borderWidth:0,
    },
    plotOptions: {
        series: {
            shadow: false,
            lineWidth:1,
            marker: {
                enabled: false,
                symbol: 'circle',
                radius: 1,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            },
            stacking:'normal',
        }
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        tickmarkPlacement: 'on',
        startOnTick:false,
        endOnTick:false,
        lineColor:'#ccc',
        tickColor:'#ccc',
    },
    yAxis: {
        title: {
            text: 'Days <br/> in Transit',
            rotation: 0,
            margin:70,
            style: {
                textAlign:'right',
            },
        },
        gridLineWidth:0,
        lineWidth:1,
        lineColor:'#ccc',
        min:0,
        tickColor:'#ccc',
        tickPosition:'outside',
        tickLength:5,
        tickInterval:10,
       ...