How do I code 4 charts (trying to use chart.js) with css grid

Im trying to code 4 charts with chart.js and represent them in a grid (2×2). so i have 4 charts in total and 2 charts next to each other.

Is it possible to implement chart.js in css grid? I have already coded a chart.js with , but it seems not to display if i put it in a grid box.

Does anyone have experience with chart layout, and is there a better/easier way to code charts than with chart.js?

Thank you!!

This is my html with my divs:


<div class="chartdivs">
        <!--chart1-->
        <div class="chart1">
            <canvas id="lineCharts" height="160" width="400"></canvas>
        </div>
        <!--chart2-->
        <div class="chart2">
            
        </div>
        <!--chart3-->
        <div class="chart3">
            
        </div>
        <!--chart4-->
        <div class="chart4">
            
        </div>
    </div>

This is my css:

chartdivs{
    height: 100vh;
    display: grid;
    grid-template-columns: 1 fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "box1 box2"
    "box3 box4";
    
}

.chart1{
    grid-area: box1;
}
.chart2{
    grid-area: box2;
}
.chart3{
    grid-area: box3;
}
.chart4{
    grid-area: box4;
}

And here is my javascript:

var myChartObject = document.getElementById("lineCharts");



var chart = new Chart(myChartObject, {
    type: "line",
    data: {
        labels: ["February", "March", "April", "May","June","July","August","September", "October", "November", "December","January"],
    
        datasets: [{
            label: "Total Covid Cases",
            backgroundColor: 'rgba(34, 49, 63, 1)',
            borderColor: 'rgba(34, 49, 63, 1)',
            data: [19,16605,29586,30845,31714,35232,42177,53282,154251,327072,452296,492832],
    
        }]
    }
});

79 thoughts on “How do I code 4 charts (trying to use chart.js) with css grid”

  1. I was very pleased to find this page. I need to to thank you for ones time for this fantastic read!!
    I definitely appreciated every little bit of it
    and i also have you saved to fav to check out new information in your blog.

    Reply
  2. First off I want to say excellent blog! I had a quick question in which I’d like to ask if you don’t mind.
    I was curious to find out how you center yourself and clear
    your thoughts before writing. I have had difficulty clearing
    my thoughts in getting my ideas out. I truly
    do enjoy writing but it just seems like the first 10 to 15 minutes are usually wasted just trying
    to figure out how to begin. Any suggestions or hints?

    Appreciate it!

    Reply
  3. Greetings from California! I’m bored to tears at work so I decided to check out your website on my iphone during lunch break.
    I enjoy the information you present here and can’t wait to take a look
    when I get home. I’m surprised at how fast your blog loaded on my phone ..
    I’m not even using WIFI, just 3G .. Anyways, very good
    blog!

    Reply
  4. Hey there are using WordPress for your site platform?
    I’m new to the blog world but I’m trying to get started and create my own. Do you require any
    coding expertise to make your own blog? Any help would be really appreciated!

    Reply
  5. Woah! I’m really loving the template/theme of this site.
    It’s simple, yet effective. A lot of times it’s very hard to
    get that “perfect balance” between usability and appearance.
    I must say you have done a superb job with this.
    Additionally, the blog loads very fast for me on Internet explorer.

    Excellent Blog!

    Reply