<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<metahttp-equiv=”X-UA-Compatible”content=”IE=edge”>
<metaname=”viewport”content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<scriptsrc=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js”></script>
</head>
<body>
<canvasid=”bar-chart”width=”600″height=”350″></canvas>
</body>
</html>
<script>
varnumberWithCommas = function(x) {
returnx.toString().replace(/\B(?=(\d{3})+(?!\d))/g, “,”);
};
var dataPack1 = [50000, 0, 0,0, 0, 0, 0, 0, 0, 0, 60100, 62000];
var dataPack2 = [0, 6000, 13000, 14000, 50060, 20030, 20070, 35000, 41000, 4020, 40030, 70050];
var dates = [“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”];
// Chart.defaults.global.elements.rectangle.backgroundColor = ‘#FF0000’;
var bar_ctx = document.getElementById(‘bar-chart’);
var bar_chart = new Chart(bar_ctx, {
type:’bar’,
data: {
labels:dates,
datasets: [
{
label:’SoftEnterprises, Sales’,
data:dataPack1,
backgroundColor:”rgba(55, 160, 225, 0.7)”,
hoverBackgroundColor:”rgba(55, 160, 225, 0.7)”,
hoverBorderWidth:2,
hoverBorderColor:’lightgrey’
},
{
label:’SmartSystems, Sales’,
data:dataPack2,
backgroundColor:”rgba(225, 58, 55, 0.7)”,
hoverBackgroundColor:”rgba(225, 58, 55, 0.7)”,
hoverBorderWidth:2,
hoverBorderColor:’lightgrey’
},
]
},
options: {
animation: {
duration:10,
onComplete:function(){
vararr = [800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800]
varmodel_y, gap
varchartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = ‘center’;
ctx.textBaseline = ‘bottom’;
ctx.fillStyle = ‘#000’;
this.data.datasets.forEach(function(dataset, i) {
varisHidden = dataset._meta[0].hidden; //’hidden’ property of dataset
if (!isHidden) { //if dataset is not hidden
varmeta = chartInstance.controller.getDatasetMeta(i);
//console.log(‘meta’, meta)
meta.data.forEach(function(bar, index) {
vardata = dataset.data[index];
diff = arr[index] – bar._model.y
arr[index] = bar._model.y
gap = diff / 2
model_y = bar._model.y + gap
console.log(‘i, index, model.y’, i, index, bar._model.y, arr[index])
ctx.fillText(data, bar._model.x, model_y);
}
);
}
});
}
},
tooltips: {
mode:’label’,
callbacks: {
label:function(tooltipItem, data) {
returndata.datasets[tooltipItem.datasetIndex].label + “: ” + numberWithCommas(tooltipItem.yLabel);
}
}
},
scales: {
xAxes: [{
stacked:true,
gridLines: { display:false },
}],
yAxes: [{
stacked:true,
ticks: {
callback:function(value) { returnnumberWithCommas(value);
},
},
}],
}, // scales
legend: {display:true}
} // options
},
);
</script>