Control Chart 1

Uses plotLines and plotLine labels to replace y axis gridlines and labels.

by franzo

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="control" style="height:400px;width:600px;margin:1em auto;"></div>

JavaScript

var chart;
chart = new Highcharts.Chart({
    chart: {
        renderTo: 'control',
        defaultSeriesType: 'line',
        marginRight:25,
        marginLeft:80,
        backgroundColor:'#f6f6f6',
        borderWidth:1,
        borderColor:'#ccc',
        plotBackgroundColor:'#999',
        plotBorderWidth:1,
        plotBorderColor:'#ccc',
    },
    credits:{
        enabled:false
    },
    title: {
        text: 'Average time to weight bearing mobilisation',
    },
    tooltip: {
        borderWidth:1,
        formatter: function() {
                if(this.point.error){
                    var errorText = '<span style="color: #f66">Warning: </span>' + this.point.error;
                }
                else{
                    var errorText = '';
                }
                return 'Week '+
                this.x +': <b>'+ this.y +'</b>'+'<br/>'+
                errorText;
        }
    },
    legend: {
        enabled:false
    },
    plotOptions:{
        series: {
            shadow: false,
            lineWidth:1,
            states: {
                hover: {
                    enabled:true,
                    lineWidth:1
                }
            },
            marker: {
                enabled:true,
                symbol:'circle',
                radius: 2,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            },
        }
    },
    xAxis: {
        lineWidth:0,
        tickColor:'#999',
        tickInterval: 5,
        title: { text: 'Week' }
    },
    yAxis: {
       title: {
            text: 'Average Time',
           x: -41
        },
        labels:{
            enabled:false
        },
        lineWidth:0,
        plotBands: [{
                zIndex:2,
                color: '#f0fff0',
                from: 29.463748195956,
                to: 44.658700783636,
            },{
                zIndex:2,
                color: '#fffaf0',
...