JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 180px; width: 100%;">
</div>
<div id="chartContainer1" style="height: 200px; width: 100%;">
</div>
JavaScript
const data = {
"data": [{
"type": "bar",
"dataPoints": [{
"x": 1561626840000,
"y": 8392
}]
},
{
"type": "bar",
"dataPoints": [{
"x": 1561626840000,
"y": 996676
}]
},
{
"type": "bar",
"dataPoints": [{
"x": 1561626840000,
"y": 5708
}]
},
{
"type": "bar",
"dataPoints": [{
"x": 1561626840000,
"y": 49750
}]
},
{
"type": "bar",
"dataPoints": [{
"x": 1561626960000,
"y": 31357132
}]
},
{
"type": "bar",
"dataPoints": [{
"x": 1561626960000,
"y": 42563
}]
},
{
"type": "bar",
"dataPoints": [{
"x": 1561626720000,
"y": 1075181.2
}]
},
{
"type": "bar",
"dataPoints": [{
"x": 1561626720000,
"y": 9453
}]
},
{
"type": "bar",
"dataPoints": [{
"x": 1561626720000,
"y": 1599587.6
}]
},
{
"type": "bar",
"dataPoints": [{
"x": 1561626720000,
"y": 1538354
}]
},
{
"type": "bar",
"dataPoints": [{
"x": 1561626720000,
"y": 4060844
}]
},
{
"type": "bar",
"dataPoints": [{
"x": 1561626720000,
"y": 4095132
}]
},
{
"type": "bar",
"dataPoints": [{
"x": 1561626900000,
"y": 36823274
}]
},
{
"type": "bar",
"dataPoints": [{
"x": 1561626900000,
"y": 153537898
}]
},
{
"type": "bar",
"dataPoints": [{
"x": 1561626780000,
"y": 148882294
}]
},
{
"type": "bar",
"dataPoints": [{
"x": 1561626780000,
"y": 164978760
}]
},
{
"type": "bar",
"dataPoints": [{
"x": 1561626900000,
"y": 7684854
}]
},
{
"type":...