html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create a chart

    var chart = anychart.quadrant();

    // 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: true, labels: {enabled: true, fontColor: 'black'}});

    chart.xAxis(1, {ticks: true, labels: {enabled: true, fontColor: 'black'}});

    chart.yAxis(0, {ticks: true, labels: {enabled: true, fontColor: 'black'}});

    chart.yAxis(1, {ticks: true, labels: {enabled: true, fontColor: 'black'}});

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

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

​

    //creating an annotations controller

    var controller = chart.annotations();

​

    // Create top-right

    var topRight = controller.rectangle({

        xAnchor: 0, 

        valueAnchor: 0, 

        secondXAnchor: 97, 

        secondValueAnchor: 97, 

        allowEdit: false,

        fill: "#d04b57 0.7",

        stroke: null

    });

    // Create bottom-right annotation

    var bottomRight = controller.rectangle({

        xAnchor: 0, 

        valueAnchor: 0, 

        secondXAnchor: 100, 

        secondValueAnchor: -100, 

        allowEdit: false,

        fill: "#acacac 0.7",

        stroke: null

    });

    // Create top-left annotation

    var topLeft = controller.rectangle({

        xAnchor: 0, 

        valueAnchor: 0, 

        secondXAnchor: -88, 

        secondValueAnchor: 88, 

        allowEdit: false,

        fill: "#a07c93 0.7",

        stroke: null

    });

    // Create bottom-left annotation

    var bottomLeft = controller.rectangle({

        xAnchor: 0, 

        valueAnchor: 0, 

        secondXAnchor: -73, 

        secondValueAnchor: -73, 

        allowEdit: false,

        fill: "#f49173 0.7",

        stroke: null,

    });

    // Opacity annotation 1

    var bottomLeft = controller.rectangle({

        xAnchor: 20, 

        valueAnchor: 20, 

        secondXAnchor: -20, 

        secondValueAnchor: -20, 

        allowEdit: false,

        fill: "white 0.3",

        stroke: null

    });

      // Opacity annotation 2

    var bottomLeft = controller.rectangle({

        xAnchor: 40, 

        valueAnchor: 40, 

        secondXAnchor: -40, 

        secondValueAnchor: -40, 

        allowEdit: false,

        fill: "white 0.3",

        stroke: null

    });

        // Opacity annotation 3

    var bottomLeft = controller.rectangle({

        xAnchor: 60, 

        valueAnchor: 60, 

        secondXAnchor: -60, 

        secondValueAnchor: -60, 

        allowEdit: false,

        fill: "white 0.3",

        stroke: null

    });

          // Opacity annotation 3

    var bottomLeft = controller.rectangle({

        xAnchor: 80, 

        valueAnchor: 80, 

        secondXAnchor: -80, 

        secondValueAnchor: -80, 

        allowEdit: false,

        fill: "white 0.3",

        stroke: null

    });

​

​

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

​

    chart.quarters(

        {

            rightTop: {

                fill: "white",

            },

            rightBottom: {

                fill: "white",

            },

            leftTop: {

                fill: "white",

            },

            leftBottom: {

                fill: "white",

            },

        }

    );

​

​

​

    // set the container id

    chart.container("container");

    chart.draw();

});