JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var chart = new CanvasJS.Chart("chartContainer",{
axisY:{
valueFormatString: "#0.#,.",
},
axisY2: {
tickThickness: 0,
lineThickness: 0,
labelFormatter: function(e) {
return " ";
}
},
data: [
{
type: "stackedColumn",
dataPoints: [
{ y: 111338 , label: "USA"},
{ y: 49088, label: "Russia" },
{ y: 62200, label: "China" },
{ y: 90085, label: "India" },
{ y: 38600, label: "Australia"},
{ y: 48750, label: "SA"}
]
}, {
type: "stackedColumn",
dataPoints: [
{ y: 135305 , label: "USA"},
{ y: 107922, label: "Russia" },
{ y: 52300, label: "China" },
{ y: 3360, label: "India" },
{ y: 39900, label: "Australia"},
{ y: 10, label: "SA"}
]
},
{
type: "stackedColumn",
axisYType: "secondary",
dataPoints: [
{ y: 135305 , label: "USA"},
{ y: 107922, label: "Russia" },
{ y: 52300, label: "China" },
{ y: 31360, label: "India" },
{ y: 39900, label: "Australia"},
{ y: 40000, label: "SA"}
]
}
]
});
chart.render();