Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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'
    }
]
}

Issue Analytics

State:
Created 5 years ago
Reactions:4
Comments:7 (1 by maintainers)

Top GitHub Comments

3reactions

flxwucommented, Apr 12, 2018

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 .

1reaction

flxwucommented, Apr 12, 2018

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.