html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create a chart

    var chart = anychart.quadrant();

​

    // set the padding of the chart

    chart.padding(35);

​

    // configure quarters

    chart.quarters(

    {

        rightTop: {

            title: {

                text: "Important but Not Urgent",

                fontSize: "16",

                fontWeight: "bold"

            }

        },

        rightBottom: {

            title: {

                text: "Not Important and Not Urgent",

                fontSize: "16",

                fontWeight: "bold"

            }

        },

        leftTop: {

            title: {

                text: "Important and Urgent",

                fontSize: "16",

                fontWeight: "bold"

            }

        },

        leftBottom: {

            title: {

                text: "Urgent But Not Important",

                fontSize: "16",

                fontWeight: "bold"

            }

        },

    }

    );

​

    // create a label on the left-top quarter

    var labelLTop = chart.quarters().leftTop().label();

    labelLTop.text("1");

    labelLTop.fontColor("gray");

    labelLTop.fontSize(16);

    labelLTop.fontWeight("bold");

    labelLTop.position("right-bottom");

    labelLTop.offsetX(-20);

    labelLTop.offsetY(-20);

​

    // create a label on the right-top quarter

    var labelRTop = chart.quarters().rightTop().label();

    labelRTop.text("2");

    labelRTop.fontColor("gray");

    labelRTop.fontSize(16);

    labelRTop.fontWeight("bold");

    labelRTop.position("left-bottom");

    labelRTop.offsetX(20);

    labelRTop.offsetY(-20);

​

    // create the first label on the left-bottom quarter

    var labelLBottom1 = chart.quarters().leftBottom().label(0);

    labelLBottom1.text("3");

    labelLBottom1.fontColor("gray");

    labelLBottom1.fontSize(16);

    labelLBottom1.fontWeight("bold");

    labelLBottom1.position("right-top");

    labelLBottom1.offsetX(-20);

    labelLBottom1.offsetY(20);

​

    // create the second label on the left-bottom quarter

    var labelLBottom2 = chart.quarters().leftBottom().label(1);

    labelLBottom2.useHtml(true);

    labelLBottom2.text("Important / Not Important →");

    labelLBottom2.position("left-bottom");

    labelLBottom2.offsetX(-20);

    labelLBottom2.offsetY(-100);

    labelLBottom2.rotation(-90);

​

    // create the third label on the left-bottom quarter

    var labelLBottom3 = chart.quarters().leftBottom().label(3);

    labelLBottom3.useHtml(true);

    labelLBottom3.text("Urgent / Not Urgent →");

    labelLBottom3.position("left-bottom");

    labelLBottom3.offsetX(80);

    labelLBottom3.offsetY(20);

​

    // create a label on the right-bottom quarter

    var labelRBottom = chart.quarters().rightBottom().label();

​

    labelRBottom.text("4");

    labelRBottom.fontColor("gray");

    labelRBottom.fontSize(16);

    labelRBottom.fontWeight("bold");

    labelRBottom.position("left-top");

    labelRBottom.offsetX(20);

    labelRBottom.offsetY(20);

​

    // set the chart title

    chart.title().useHtml(true);

    chart.title("Quadrant Chart: Quarter Labels" + "<br>" +

                "<a style=\"font-size: 12px;\">Procrastination Matrix</a>");

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});