JSFiddle - React, Tailwind, and code Playground

by prakhar230792

HTML

<div id="container"></div>

CSS

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

JavaScript

anychart.onDocumentReady(function () {

    // create data
    var data = [
      {x: 4, value: 42},
      {x: 13, value: 59},
      {x: 25, value: 68},
      {x: 25, value: 63},
      {x: 44, value: 54},
      {x: 55, value: 58},
      {x: 56, value: 46},
      {x: 60, value: 54},
      {x: 72, value: 98}
    ];

    // create a chart
    var chart = anychart.quadrant(data);

    // configure quarters
    chart.quarters(
    {
        rightTop: {
            title: {
                text: "Right Top bfbdfd dfg dfgdf gdfg dfg dfg",
                fontColor: "#fa8072",
                fontSize: "24",
                fontWeight: "bold"
            }
        },
        rightBottom: {
            title: {
                text: "Right Bottom",
                fontColor: "#72fa80",
                fontSize: "24",
                fontWeight: "bold"
            }
        },
        leftTop: {
            title: {
                text: "Left Top",
                fontColor: "#72fa80",
                fontSize: "24",
                fontWeight: "bold"
            }
        },
        leftBottom: {
            title: {
                fontColor: "#fa8072",
                text: "Left Bottom",
                fontSize: "24",
                fontWeight: "bold"
            }
        },
    }
    );

    // set the chart title
    chart.title("Quadrant Chart: Quarters (Titles)");

    // set the container id
    chart.container("container");

    // initiate drawing the chart
    chart.draw();
});