Scatter with Quadrants

author(s): Ashutosh Srivastav

by Haze32

HTML

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


<div id="container1" ></div>

JavaScript

Highcharts.chart('container1', {
 chart: {
    type: 'scatter',
    events: {
        render: function () {
        
        var chart = this

            //Calculate the quadrant coordinates; toPixels uses point values
            var x0 = chart.xAxis[0].toPixels(0, false);
            var x1 = chart.xAxis[0].toPixels(50, false);
            var x2 = chart.xAxis[0].toPixels(100, false);

            //The y axis coordinates return values from TOP LEFT origin (opposite order)
            var y0 = chart.yAxis[0].toPixels(100, false);
            var y1 = chart.yAxis[0].toPixels(50, false);
            var y2 = chart.yAxis[0].toPixels(0, false);

            //Draw the quadrants
            chart.renderer.rect(x0, y1, x1 - x0, y2 - y1, 1).attr({ fill: 'lightblue', zIndex: 0 }).add();
            chart.renderer.rect(x0, y0, x1 - x0, y1 - y0, 1).attr({ fill: 'lightyellow', zIndex: 0 }).add();
            chart.renderer.rect(x1, y0, x2 - x1, y1 - y0, 1).attr({ fill: 'lightblue', zIndex: 0 }).add();
            chart.renderer.rect(x1, y1, x2 - x1, y2 - y1, 1).attr({ fill: 'lightyellow', zIndex: 0 }).add();

            }
        },

    },
    title: {
        text: ''
    },
    xAxis: {
    	  min:-10,
        max:10,
        tickInterval:1,
        labels:{
        	enabled: false
    		},        
        gridLineWidth:1,
        showLastLabel:true,
        showFirstLabel:false,
        lineColor:'#ccc',
        lineWidth:1,
    },
    yAxis: {
    	  min:-10,
        max:10,
        labels:{
        	enabled: false
    		},
        tickInterval :1,
        gridLineWidth:1,
        lineColor:'#ccc'
    },
    
    plotOptions: {
        scatter: {
            marker: {
                radius: 3
            },
            tooltip: {              
                enabled:false
            }
        },
        series:{
            animation :  false,
            shadow: false,
            enableMouseTracking: false
        }
    },
    series: [{
        color: 'red',
...