Chartjs-How to display grouped data in ChartJs

by

0👍

You need to organize your data as such: 

var ctx = document.getElementById("canvas").getContext("2d");

var data = {
    labels: ['21/03/2018','01/04/2018','02/04/2018','04/04/2018','05/04/2018','06/04/2018'],
    datasets: [
        {              
                data: [12, 15.00, 25.00, 25.00, -8.14, -35.9]
        },{          
                data: [0, 15.00, 25.00, 25.00, -7.93, -38.1]
        },{          
                data: [0, 15.00, 25.00, 25.00, -7.84, -37.5]
        }
    ]   
};

var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options:{
        legend: 'none'
    }
});

I took your legend out as it’s useless in this case. To look at it in the coding persepective, whatever index the date in labels is at needs to correlate with the index of the information you want to display in that grouping. data[0] refers to labels[0] and so on.

Leave a comment