JSFiddle - React, Tailwind, and code Playground

by jonnyc

HTML

<h1>Demo: Columns - Monthly Sales</h1>
		
		<div id="chartNode" style="width:400px;height:200px;"></div>

JavaScript

require([
     // Require the basic chart class
    "dojox/charting/Chart",
 
    // Require the theme of our choosing
    "dojox/charting/themes/MiamiNice",
 
    // Charting plugins:
 
    //  We want to plot Columns
    "dojox/charting/plot2d/Columns",
    "dojox/charting/plot2d/Bars",
 
    //  We want to use Markers
    "dojox/charting/plot2d/Markers",
 
    //  We'll use default x/y axes
    "dojox/charting/axis2d/Default",
 
    // Wait until the DOM is ready
    "dojo/domReady!"
], function(Chart, theme) {
 
    // Define the data
    var chartData = [100,352,300,4,7];
 
    // Create the chart within it's "holding" node
    var chart = new Chart("chartNode");
 
    // Set the theme
    chart.setTheme(theme);
 
    // Add the only/default plot
    chart.addPlot("default", {
        type: "Bars",
        gap: 5
    });
 
    // Add axes
    chart.addAxis("x", { includeZero: true, type: "Invisible"});
    chart.addAxis("y", { vertical: true,
                        minorLabels: false,
                        stroke: "transparent",
                        majorTick: {color: "transparent"},
                        microTicks: false,
                        minorTicks: false,
                        labels:[{value:1, text: "0879846353"},
                                {value:2, text: "0776543218"},
                                {value:3, text: "0541651315"},
                                {value:4, text: "0654654375"},
                                {value:5, text: "0776546533"}
                               ]});
 
    // Add the series of data
    chart.addSeries("Monthly Sales",chartData);
 
    // Render the chart!
    chart.render();
 
});