JSFiddle - React, Tailwind, and code Playground

by vusan

HTML

<div id="container">
    <div id="banner">This is a banner</div>
    <div id="chart"></div>
</div>

CSS

#container {
    height: 300px;
    width: 500px;
    overflow: auto;
}


#banner {
    height: 30px;
    line-height: 30px;
    background-color: #ededed;
}

#chart {
    height: 270px;
    background-color: red;
}

JavaScript

require(['dojox/charting/Chart', 'dojox/charting/axis2d/Default', 'dojox/charting/plot2d/Bubble', 'dojox/charting/themes/Claro'], function (Chart, axis, plot, theme) {
    console.log(Chart);
    window.chart = new Chart("chart").
            setTheme(theme).
            addAxis("x", {min: 0, max: 10, type: axis}).
            addAxis("y", {vertical: true, min: 0, max: 10, type: axis}).
            addPlot("Plot 1", {type: plot}).
            addSeries("Series A", [{x: 3, y: 3, size: 4}], {plot: "Plot 1", color: "red"}).
            addSeries("Series B", [{x: 5, y: 5, size: 4}], {plot: "Plot 1", color: "green"}).
            addSeries("Series C", [{x: 7, y: 7, size: 4}], {plot: "Plot 1", color: "blue"}).
            render();
});