diagonal

by jlbriggs

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height:400px;margin:1.5em 1em;"></div>

JavaScript

var data1 = [
     [8,9],
     [8,7],
     [4,5],
     [6,3],
     [4,5],
     [2,3],
     [3,6],
     [5,7],
     [7,2],
     [1,3],
     [2,1]
];
var data2 = [[0,0],[10,10]];

var options = {
    chart: {
        type:'scatter',
        margin:[50,25,60,100],
        zoomType:'xy',
        style: {
            fontFamily: 'Geneva, Tahoma, Verdana, sans-serif'
        }
    },
    title: {
        text: 'Chart Test Example',
        style: {
            fontSize:'1em',
            fontWeight:'bold'
        }    
    },
    credits: { enabled: false },
    legend:  { enabled: false },
    tooltip: {
        shared: true,
        crossHairs: true,
        useHTML: true
    },
    plotOptions: {
        line: {
            color:'rgba(204,0,0,.75)',
            lineWidth:.5,
            showInLegend:false,
            enableMouseTracking:false,
            marker: {
                enabled:false
            }
        },
        scatter: {
            marker: {
                symbol: 'circle',
                fillColor:'rgba(0,154,253,1)'
            }
        },
        series: {
            shadow: false
        }
    },
    xAxis: {
        title: {  
            text: 'Predicted Values',
            style: {
                color:'#000',
                fontWeight:'bold',
                fontSize:'10px'
            }
        },
        labels: {
             style: {
                color:'#333',
                fontSize:'10px'
            }
        },
        min:0,
        max:10,
        lineColor:'#000',
        lineWidth:.5,
        tickWidth:.5,
        tickLength:3,
        tickColor:'#000'
    },
    yAxis: {
        min:0,
        max:10,
        lineColor:'#000',
        lineWidth:.5,
        tickWidth:.5,
        tickLength:3,
        tickColor:'#000',
        gridLineWidth:.5,
        gridLineColor:'#eee',
        title: {                
            text: 'Observed<br/>Values',
            rotation:0,
            margin:35,
            style: {
   ...