Scatter with Quadrants

author(s): Ashutosh Srivastav

by Ashutosh Srivastav

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="container1" style="max-height: 800px; max-width: 800px; margin: 0 auto; display: inline-block;"></div>

JavaScript

Highcharts.chart('container1', {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'scatter',
        zoomType: 'xy',
        height: 400
        
    },
    title: {
        text: ''
    },
    xAxis: {
    	  min:0,
        max:256,
        tickInterval:16,
        plotLines:[{
            value:128,
            color:'#666',
            dashStyle: 'solid',
            width:2,
            zIndex: 5
        }],
        labels:{
        	enabled: false
    		},        
        gridLineWidth:1,
        showLastLabel:true,
        showFirstLabel:false,
        lineColor:'#ccc',
        lineWidth:1,
        startOnTick: true,
        endOnTick: true
    },
    yAxis: {
    	  min:0,
        max:256,
				plotLines:[{
            value:128,
            dashStyle: 'solid',
            color:'#666',
            width:2,
            zIndex: 5
        }],
        labels:{
        	enabled: false
    		},
        tickInterval :16,
        gridLineWidth:1,
        showLastLabel:true,
        showFirstLabel:false,
        lineColor:'#ccc'
    },
    
    plotOptions: {
        scatter: {
            marker: {
                radius: 3
            },
            tooltip: {              
                enabled:false
            }
        },
        series:{
            animation :  false,
            shadow: false,
            enableMouseTracking: false
        }
    },
    series: [{
        color: 'rgba(225, 225, 225)',
        data:...