Create a stacked column chart with four teams' data using CanvasJS library.
HTML
<div id="chartContainer" style="height: 360px; width: 100%;">
</div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
JavaScript
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
toolTip: {
shared: true
},
data: [
{
type: "stackedColumn",
name: "Team A",
showInLegend: "true",
dataPoints: [
{label:"Blank",x:1,y:74},
{label:"Local",x:2,y:895},
{label:"International",x:3,y:177},
{label:"Domestic",x:4,y:2}
]
},
{
type: "stackedColumn",
name: "Team B",
showInLegend: "true",
dataPoints: [
{label:"Blank",x:1,y:1},
{label:"Hotel",x:5,y:8},
{label:"International",x:3,y:3}
]
},
{
type: "stackedColumn",
name: "Team C",
showInLegend: "true",
dataPoints: [
{label:"Blank",x:1,y:377},
{label:"Local",x:2,y:279},
{label:"International",x:3,y:61},
{label:"Domestic",x:4,y:1}
]
},
{
type: "stackedColumn",
name: "Team D",
showInLegend: "true",
dataPoints: [
{label:"International",x:3,y:1}
]
}
]
});
chart.render();
}