html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create a chart

    var chart = anychart.scatter();

    // configure scales

    chart.yScale().minimum(-100).ticks().set([-80, -60, -40, -20, 20, 40, 60, 80]);

    chart.yScale().maximum(100).ticks().set([-80, -60, -40, -20, 20, 40, 60, 80]);

    chart.xScale().minimum(-100).ticks().set([-80, -60, -40, -20, 20, 40, 60, 80]);

    chart.xScale().maximum(100).ticks().set([-80, -60, -40, -20, 20, 40, 60, 80]);

​

    // configure axes

    chart.xAxis(0, {

      ticks: {

        enabled: true,

        stroke: 'transparent'

      },

      orientation: 'left',

      labels: {

        enabled: true,

        fontColor: 'black',

        fontSize: '1em'

      },

      stroke: 'black'

    });

    chart.xAxis(1, {

      ticks: {

        enabled: true,

        stroke: 'transparent'

      },

      orientation: 'right',

      labels: {

        enabled: true,

        fontColor: 'black',

        fontSize: '1em'

      },

      stroke: 'black'

    });

    chart.yAxis(0, {

      ticks: {

        enabled: true,

        stroke: 'transparent'

      },

      orientation: 'bottom', 

      labels: {

        enabled: true,

        fontColor: 'black',

        fontSize: '1em'

      },

      stroke: 'black'

    });

    chart.yAxis(1, {

      ticks: {

        enabled: true,

        stroke: 'transparent'

      },

      orientation: 'top',

      labels: {

        enabled: true,

        fontColor: 'black',

        fontSize: '1em'

      },

      stroke: 'black'

    });

    // change labels to the absolute value of the axis passed as a parameter

    function setLabelsPositive(axis){

      axis.labels().format(function(e){

        return Math.abs(e.value)

    })

    }

    // call function for every axis

    setLabelsPositive(chart.xAxis(0))

    setLabelsPositive(chart.xAxis(1))

    setLabelsPositive(chart.yAxis(0))

    setLabelsPositive(chart.yAxis(1))

    chart.xGrid().enabled(true).stroke('black 1');

    chart.xGrid().zIndex(2);

    chart.yGrid().enabled(true).stroke('black 1');

    chart.yGrid().zIndex(2);

​

    //creating an annotations controller

    var controller = chart.annotations();

    controller.zIndex(1)

​

    // Create top-right

    var topRight = controller.rectangle({

        xAnchor: 0, 

        valueAnchor: 0, 

        secondXAnchor: 97, 

        secondValueAnchor: 97, 

        allowEdit: false,

        fill: "#d04b57",

        stroke: null,

        zIndex: -2,

    });

    // Create bottom-right annotation

    var bottomRight = controller.rectangle({

        xAnchor: 0, 

        valueAnchor: 0, 

        secondXAnchor: 100, 

        secondValueAnchor: -100, 

        allowEdit: false,

        fill: "#acacac",

        stroke: null,

        zIndex: -2,

    });

    // Create top-left annotation

    var topLeft = controller.rectangle({

        xAnchor: 0, 

        valueAnchor: 0, 

        secondXAnchor: -88, 

        secondValueAnchor: 88, 

        allowEdit: false,

        fill: "#a07c93",

        stroke: null,

        zIndex: -2,

    });

    // Create bottom-left annotation

    var bottomLeft = controller.rectangle({

        xAnchor: 0, 

        valueAnchor: 0, 

        secondXAnchor: -73, 

        secondValueAnchor: -73, 

        allowEdit: false,

        fill: "#f49173",

        stroke: null,

        zIndex: -2,

    });

    // Opacity annotation 1

    var opacityAnnotation1 = controller.rectangle({

        xAnchor: 20, 

        valueAnchor: 20, 

        secondXAnchor: -20, 

        secondValueAnchor: -20, 

        allowEdit: false,

        fill: "white 0.3",

        stroke: null,

        zIndex: -1,

    });

      // Opacity annotation 2

    var opacityAnnotation2 = controller.rectangle({

        xAnchor: 40, 

        valueAnchor: 40, 

        secondXAnchor: -40, 

        secondValueAnchor: -40, 

        allowEdit: false,

        fill: "white 0.3",

        stroke: null,

        zIndex: -1,

    });

        // Opacity annotation 3

    var opacityAnnotation3 = controller.rectangle({

        xAnchor: 60, 

        valueAnchor: 60, 

        secondXAnchor: -60, 

        secondValueAnchor: -60, 

        allowEdit: false,

        fill: "white 0.3",

        stroke: null,

        zIndex: -1,

    });

          // Opacity annotation 3

    var opacityAnnotation4 = controller.rectangle({

        xAnchor: 80, 

        valueAnchor: 80, 

        secondXAnchor: -80, 

        secondValueAnchor: -80, 

        allowEdit: false,

        fill: "white 0.3",

        stroke: null,

        zIndex: -1,

    });

​

​

    chart.crossing().stroke("black", 1);

​

    // set the container id

    chart.container("container");

    chart.draw();

});