JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html >
<head>
<script>dojoConfig = {parseOnLoad: true}</script>
<script>require(["dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Lines", "dojo/ready"],
function(Chart, Default, Lines, ready){
ready(function(){
var chart1 = new Chart("simplechart");
chart1.addPlot("default", {type: Lines, markers:true, styleFunc: function(item){console.log(item);
if(item <= 2){
return { fill : "red" };
}else if(item > 3){
return { fill: "green" };
}
return {};
}});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true});
chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
chart1.render();
});
});</script>
</head>
<body class="claro">
<div id="simplechart" style="width: 250px; height: 150px; margin: 5px auto 0px auto;"></div>
</body>
</html>