JSFiddle - React, Tailwind, and code Playground
HTML
<div id="test" style="width: 400px; height: 240px; margin: 30px auto 0px auto;"></div>
<div id="pieChart" style="width: 400px; height: 240px; margin: 30px auto 0px auto;"></div>
JavaScript
require([
"dojox/charting/Chart",
"dojox/charting/themes/MiamiNice",
"dojox/charting/plot2d/ClusteredColumns",
"dojox/charting/plot2d/Pie",
"dojox/charting/plot2d/Markers",
"dojox/charting/axis2d/Default",
"dojo/domReady!"
], function(Chart, theme, ClusteredColumns,Pie) {
// Define the data
var colX = [809,76,881,11156];
var colY = [809,76,881,11156];
var pieX = [45,87,76,65];
//var stkX = [34,34,56,67];
// Create the chart within it's "holding" node
var chart = new Chart("test");
var pieChart = new Chart("pieChart");
// Set the theme
chart.setTheme(theme);
pieChart.setTheme(theme);
pieChart.addPlot("piePlot", {
type: Pie,
radius:50,
htmlLabels: false
});
chart.addPlot("default", {
type: ClusteredColumns,
markers: true,
gap: 5,
htmlLabels: false
});
// Add axes
chart.addAxis("x",{htmlLabels: false, microTicks: false, minorLabels: false });
chart.addAxis("y", { min:0, max:100, vertical: true, fixLower: "major", fixUpper: "major",htmlLabels: false });
// Add the series of data
chart.addSeries("Series A",colX,{ stroke: {color: "red"}, fill: "lightpink" });
chart.addSeries("Series B",colY,{stroke: {color: "blue"}, fill: "lightblue"});
pieChart.addSeries("pttt", pieX,
{plot: "piePlot", stroke: {color:"#cfc",width:1},fill:"#ccf"});
// Render the chart!
chart.render();
pieChart.render();
});