Chart.js: Stacked Bar Chart with time scale - multiple issues(0-valued datapoints, time scale ordering)

[flxwu]

What it looks like (false behavior)

My Options

options = {
    {
        legend: {
            display: false
        },
        maintainAspectRatio: false,
        scales: {
            xAxes: [{
                stacked: true,
                title: 'time',
                type: 'time',
                gridLines: {
                    lineWidth: 2
                },
                time: {
                    unit: 'day',
                    unitStepSize: 1
                },
                ticks: {
                    maxRotation: 0
                }
            }],
            yAxes: [{
                stacked: true,
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
}

My datasets

datasets: [{
        label: 'one',
        data: [{
                x: '2016-12-25',
                y: 20
            },
            {
                x: '2016-12-26',
                y: 10
            }
        ],
        backgroundColor: 'green'
    },
    {
        label: 'two',
        data: [{
                x: '2016-12-27',
                y: 20
            },
            {
                x: '2016-12-28',
                y: 10
            }
        ],
        backgroundColor: 'red'
    }
]
}

[simonbrunel]

Please provide a jsfiddle (or similar) that reproduces this issue, but also the Chart.js version.

[flxwu]

My Chart.js version is 2.7.2.

I actually found out what caused it: You have to have every time point in every dataset and set the ones you don't use to 0 respectively - like this:

datasets: [{
        label: 'one',
        data: [{
                x: '2016-12-25',
                y: 20
            },
            {
                x: '2016-12-26',
                y: 10
            },
           {
                x: '2016-12-27',
                y: 0
            },
            {
                x: '2016-12-28',
                y: 0
            }
        ],
        backgroundColor: 'green'
    },
    {
        label: 'two',
        data: [{
                x: '2016-12-25',
                y: 0
            },
            {
                x: '2016-12-26',
                y: 0
            },
           {
                x: '2016-12-27',
                y: 20
            },
            {
                x: '2016-12-28',
                y: 10
            }
        ],
        backgroundColor: 'red'
    }
]
}

But I don't think that's the way it's supposed to work, because now, when I hover over the bottom, there come the "0" valued tooltips... but at least, the blocks aren't floating around anymore.
And I also ran in #5407 .

[flxwu]

And another bug:
The order of the data tuples has to be the same on each dataset, otherwise, there are weird floating blocks again.

[flxwu]

So I can't have

data: [{
                x: '2016-12-25',
                y: 20
            },
            {
                x: '2016-12-26',
                y: 10
            }
        ]

on the first dataset and

data: [{
                x: '2016-12-26',
                y: 10
            },
            {
                x: '2016-12-25',
                y: 20
            }
        ],

on the second.

[alesvaupotic]

Here is my example, which acts weird on stacking and also on just hiding a series: just click the first red one (Products) and it hides all of them. https://codepen.io/alesvaupotic/pen/bvyzGR

Switch stacked: true on xAxes and yAxes and you get

[flxwu]

Any update on this one?

[stukdev]

The same issue for me...any update about this?