Chartjs Stacked bar chart not displaying correctly - chart.js

Question

I'm trying to create a stacked bar chart with chartjs. I have time series with discrepencies in time, this means some series can have value for a time but others don't. For this reason I chose to include directly the x values in the dataset and not as a label array, but the chart does not render correctly.
Here is my code:
var config = {
type:'bar',
data:{
datasets:datasets
},
options: {
responsive: true,
title:{
display:true,
text:"MyChart"
},
tooltips: {
mode: 'index'
},
hover: {
mode: 'index'
},
legend: {
position: 'bottom'
},
elements: { point: { radius: 0 }},
scales: {
xAxes: [{
stacked: true,
type: 'time',
time: {
unit: 'minutes',
unitStepSize: 5,
displayFormats:{
minutes:'HH:mm'
}
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
stacked:true,
scaleLabel: {
display: true,
labelString: 'Resources Consumed'
}
}]
}
}
};
var ctx = document.getElementById('session-sql-activity').getContext("2d");
ctx.canvas.height = 300;
ctx.canvas.width = 800;
new Chart(ctx,config);
I think the issue is with the x axis stacking.
Here is a JSFiddle illustrating the problem.
https://jsfiddle.net/1kLyyjfp/

Answer 1

I think a solution is to specify a value for the y axis anyway.
{
"y": 0,
"x": "2017-12-22 08:59"
}
The resulting dataset is:
[{
"data": [{
"y": 2,
"x": "2017-12-22 08:59"
}, {
"y": 18,
"x": "2017-12-22 09:00"
}],
"backgroundColor": "#32AA09",
"label": "7726bj0dhtnmt"
}, {
"data": [{
"y": 0,
"x": "2017-12-22 08:59"
}, {
"y": 2,
"x": "2017-12-22 09:00"
}],
"backgroundColor": "#CF5A26",
"label": "0ks4u5nywjbdj"
}, {
"data": [{
"y": 0,
"x": "2017-12-22 08:59"
}, {
"y": 4,
"x": "2017-12-22 09:00"
}],
"backgroundColor": "#DA43AA",
"label": "1mnbsygj75jvx"
}, {
"data": [{
"y": 0,
"x": "2017-12-22 08:59"
}, {
"y": 2,
"x": "2017-12-22 09:00"
}],
"backgroundColor": "#5200A0",
"label": "39ymdt11ybwhz"
}, {
"data": [{
"y": 0,
"x": "2017-12-22 08:59"
}, {
"y": 2,
"x": "2017-12-22 09:00"
}],
"backgroundColor": "#925E44",
"label": "4v1whmzv76j2z"
}, {
"data": [{
"y": 0,
"x": "2017-12-22 08:59"
}, {
"y": 2,
"x": "2017-12-22 09:00"
}],
"backgroundColor": "#477BD4",
"label": "5sfyujuhwbj9n"
}, {
"data": [{
"y": 0,
"x": "2017-12-22 08:59"
}, {
"y": 4,
"x": "2017-12-22 09:00"
}],
"backgroundColor": "#272755",
"label": "6x0zvf2mw8t6g"
}, {
"data": [{
"y": 0,
"x": "2017-12-22 08:59"
}, {
"y": 2,
"x": "2017-12-22 09:00"
}],
"backgroundColor": "#F581E0",
"label": "7kpk62m5n8j9q"
}, {
"data": [{
"y": 0,
"x": "2017-12-22 08:59"
}, {
"y": 20,
"x": "2017-12-22 09:00"
}],
"backgroundColor": "#4128A8",
"label": "7mwz4m103nn1k"
}];