html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create a chart

    var chart = anychart.scatter();

    //set min and max axis 

    chart.yScale().minimum(0);

    chart.yScale().maximum(100);

    chart.xScale().minimum(0);

    chart.xScale().maximum(100);

    //creating an annotations controller

    var controller = chart.annotations();

​

        // Create rectangle annotation 1

    var area1 = controller.rectangle({

        xAnchor: 0, //bottom left point

        valueAnchor: 0, //bottom right point

        secondXAnchor: 30, //top left point 

        secondValueAnchor: 30, //top right point

        allowEdit: false,

        color: "#aaaa0055",

​

    });

​

        // Create rectangle annotation 1

    var area2 = controller.rectangle({

        xAnchor: 30, //bottom left point

        valueAnchor: 30, //bottom right point

        secondXAnchor: 100, //top left point 

        secondValueAnchor: 100, //top right point

        allowEdit: false,

        color: "#00aaaa55",

    });

​

​

    // set the container id

    chart.container("container");

    chart.draw();

});