Control Chart 3

tickPositions

by franzo

HTML

<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:60,
        backgroundColor:'#eee',
        borderWidth:1,
        borderColor:'#ccc',
        plotBackgroundColor:'#fff',
        plotBorderWidth:1,
        plotBorderColor:'#ccc',
    },
    credits:{
        enabled:false
    },
    title: {
        text: 'Control Chart',
    },
    tooltip: {
        borderWidth:1,
        formatter: function() {
                if(this.point.error){
                    var errorText = '<b>Warning: </b>' + this.point.error;
                }
                else{
                    var errorText = '';
                }
                return '<b>'+ this.series.name +'</b><br/>Week '+
                this.x +': '+ this.y +'%'+'<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',
    },
    yAxis: {
        tickPositions:[14.27,21.87,29.46,37.06,44.66,52.66,59.85],
        plotLines:[{
            value:14.27,
            color:'rgba(162,29,33,.75)',
            width:1,
            zIndex:3
        },{
            value:37.06,
            color:'rgba(24,90,169,.75)',
            width:1,
            zIndex:3
        },{
            value:59.85,
            color:'rgba(162,29,33,.75)',
            width:1,
            zIndex:3
        }],
        title: {text: ''},
 ...