Chartjs Stacked bar chart not displaying correctly

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/

ealain ealain · Accepted Answer · 2017-12-22T13:54:07

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"
}];

Chartjs Stacked bar chart not displaying correctly

1 Answers