[Chartjs]-Grouped Bar Chart ChartJS

by

1👍

As per your requirement, your datasets array in data variable should look like this : 

var data = {
    labels: ['Monday', 'Tuesday', 'Wednesday'],
    datasets: [{
        label: "original_tweet",
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        data: [756,456,956]
    }, {
        label: "retweets",
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,0.8)",
        highlightFill: "rgba(151,187,205,0.75)",
        highlightStroke: "rgba(151,187,205,1)",
        data: [345,345,345]
    }, {
        label: "shared",
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,0.8)",
        highlightFill: "rgba(151,187,205,0.75)",
        highlightStroke: "rgba(151,187,205,1)",
        data: [34,34,34]
    }, {
        label: "quoted",
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,0.8)",
        highlightFill: "rgba(151,187,205,0.75)",
        highlightStroke: "rgba(151,187,205,1)",
        data: [14,14,14]
    }]
};

In datasets, you must categorize all the options you want to see as grouped bars. In your case original_tweet, retweets, shared,quoted.

Labels will be the points on X-axis. If somewhere data for some point on X-axis not available e.g data of retweets not available for ‘Monday’ then it will be 0 in retweet’s data array like in below code:

...
}, {
  label: "retweets",
    fillColor: "rgba(151,187,205,0.5)",
    strokeColor: "rgba(151,187,205,0.8)",
    highlightFill: "rgba(151,187,205,0.75)",
    highlightStroke: "rgba(151,187,205,1)",
    data: [0,345,345]
}, {
...

Leave a comment