Chart.js x-axis time doesn't show values when using combined (mixed) charts

Question

When setting the x-axis to type 'time' and using mixed chart data some of the chart data won't display.

I'm using: [email protected] [email protected]

I've tried some different options, (stacked/not-stacked, stepSize, distribution) but always some data points are not showed.


function newDate(days) {
    return moment().add(days, 'd');
}

const data1 = [
    {
        x: newDate(-2),
        y: 10
    },
    {
        x: newDate(-1),
        y: 1
    },
    {
        x: newDate(0),
        y: 10
    }
];

const data2 = [
    {
        x: newDate(-3),
        y: 50
    },
    {
        x: newDate(-2),
        y: 50
    },
    {
        x: newDate(-1),
        y: 75
    },
    {
        x: newDate(0),
        y: 100
    }
];

const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [
            {
                type: 'line',
                data: data1,
                fill: false,
                yAxisID: 'right-y-axis',
                label: 'Line',
                backgroundColor: '#000',
                borderColor: '#ccc',
                borderWidth: 3,
            },
            {
                type: 'bar',
                data: data2,
                fill: false,
                yAxisID: 'left-y-axis',
                label: 'Bar',
                backgroundColor: '#aaa',
                borderColor: '#000',
                borderWidth: 1,
            }
        ]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                distribution: 'linear',
                time: {
                    tooltipFormat: 'MMM D',
                    unit: 'day',
                    stepSize: 1,
                },
                barPercentage: 0.5,
                display: true,
                stacked:true,
            }],
            yAxes: [{
                id: 'left-y-axis',
                type: 'linear',
                position: 'left',
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: '#'
                },
                gridLines: {
                    drawOnChartArea: false
                }
            }, {
                id: 'right-y-axis',
                type: 'linear',
                position: 'right',
                display: true,
                stacked: false,
                scaleLabel: {
                    display: true,
                    labelString: '$'
                }
            }],
        }
    }
});

This is an image of the actual chart generated: https://imgur.com/a/zFsOcsK

I was expecting 4 bars rendering.

I currently have no idea what is wrong, and there is no error message.

Jsfiddle of the error: https://jsfiddle.net/bundsgaard/tzeg6pwh/

Rasmus Bundsgaard Rasmus Bundsgaard · Accepted Answer · 2019-09-30T09:14:45

So the error was the y-axis starting from the lowest data point in the dataset. This makes the bar invisible, though it is possible to hover.

By setting:

ticks: {
    beginAtZero: true
}

in the yAxis scale i can overcome this. It is also possible to set the minBarLength on the yAxis the datapoints is attached to (to avoid 0 values not displaying)

Chart.js x-axis time doesn't show values when using combined (mixed) charts

1 Answers