Chart.js multiple columns of data for the same label

Question

I'm using Chart.js 2.7 and I want to show multiple columns of data for the same label. For example I want a chart with the months of the year as labels, but to show a number for each day of the month, not a number per month. So for a single label I will have about 30 columns of data.

Is this possible?

Answer 1

That sounds like a grouped Bar chart. Here's an example that uses RGraph ( https://www.rgraph.net ) to show it:

https://www.rgraph.net/fiddle/view.html/a-grouped-bar-chart-example

The amount of data that you have makes for a very wide chart though (12x30 bars) though, so here you have a 5000px wide canvas which sits inside a 1000px DIV tag which has the CSS overflow set to auto (so that you get a scroll bar).

Here's the code from that page:

Include the libraries:

<script src="/libraries/RGraph.common.core.js"></script>
<script src="/libraries/RGraph.bar.js"></script>

Define the canvas tag in your HTML:

<div style="width: 1000px; overflow: auto">
    <canvas id="cvs" width="5000" height="250">[No canvas support]</canvas>
</div>

And the code that makes the chart:

var bar = new RGraph.Bar({
    id: "cvs",
    data: [
        [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], // January
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2], // February
        [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], // March
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2], // April
        [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], // May
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2], // June
        [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], // July
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2], // August
        [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], // September
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2], // October
        [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], // November
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2]  // December
    ],
    options: {
        colors: ['red'],
        shadow: false,
        labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
    }
}).draw();