How to show 4 charts with a specific code in my view

Hi. I’m implementing asp.net core project. I want to create a dashboard that has 3 div and those divs contains some numbers and I was successful to create them. Also I have 4 charts which I post their related code here and I want to put one of those charts near those 3 divs in the first row and show other 3 charts on the second row near each other. but I don’t have any opinion how can I show them like I mentioned.

Here is my code for showing chart:

@using System.Linq;

@model List<MyDashboard.Models.ChartModel>
@{
        var XLabels = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Select(x => x.DimensionOne).ToList());
        var YValues = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Select(x => x.Quantity).ToList());
        ViewData["Title"] = "Pie Chart";
    }

    <!DOCTYPE html>

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Pie</title>
    </head>
    <body>
        <div class="box-body">

            <div class="chart-container">
                <canvas id="chart" style="width:100%; height:500px"></canvas>
            </div>
        </div>
    </body>
    </html>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">

                $(function () {
            var chartName = "chart";
                var ctx = document.getElementById(chartName).getContext('2d');
                var data = {
                        labels: @Html.Raw(XLabels),
                        datasets: [{
                            label: "Drinks Chart",
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)',
                                'rgba(255, 0, 0)',
                                'rgba(0, 255, 0)',
                                'rgba(0, 0, 255)',
                                'rgba(192, 192, 192)',
                                'rgba(255, 255, 0)',
                                'rgba(255, 0, 255)'
                            ],
                            borderColor: [
                                'rgba(255,99,132,1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)',
                                'rgba(255, 0, 0)',
                                'rgba(0, 255, 0)',
                                'rgba(0, 0, 255)',
                                'rgba(192, 192, 192)',
                                'rgba(255, 255, 0)',
                                'rgba(255, 0, 255)'
                            ],
                            borderWidth: 1,
                            data: @Html.Raw(YValues)
            }]
                    };

        var options = {
                        maintainAspectRatio: false,
                        scales: {
                            yAxes: [{
                                ticks: {
                                    min: 0,
                                    beginAtZero: true
                                },
                                gridLines: {
                                    display: true,
                                    color: "rgba(255,99,164,0.2)"
                                }
        }],
                            xAxes: [{
                                ticks: {
                                    min: 0,
                                    beginAtZero: true
                                },
                                gridLines: {
                                    display: false
                                }
                            }]
                        }
                    };

               var myChart = new  Chart(ctx, {
                        options: options,
                        data: data,
                        type:'pie'

                    });
                });
    </script>

And here is my code about showing those divs I mentioned earlier:

<html>
<body class="w3-light-grey">
 <div class="w3-main" style="margin-left:300px;margin-top:43px;">

        <!-- Header -->
        <header class="w3-container" style="padding-top:22px">
            <h5><b><i class="fa fa-dashboard"></i> My Dashboard</b></h5>
        </header>

        <div class="w3-row-padding w3-margin-bottom">
            <div class="w3-quarter">
                <div class="w3-container w3-red w3-padding-16">
                    <div class="w3-left"><i class="fa fa-comment w3-xxxlarge"></i></div>
                    <div class="w3-right">
                        <h3>@ViewBag.TotalApiCount</h3>
                    </div>
                    <div class="w3-clear"></div>
                    <h4>API number</h4>
                </div>
            </div>
            <div class="w3-quarter">
                <div class="w3-container w3-blue w3-padding-16">
                    <div class="w3-left"><i class="fa fa-eye w3-xxxlarge"></i></div>
                    <div class="w3-right">
                        <h3>@ViewBag.TotalApplicantCount</h3>
                    </div>
                    <div class="w3-clear"></div>
                    <h4>Applicant number</h4>
                </div>
            </div>
            <div class="w3-quarter">
                <div class="w3-container w3-teal w3-padding-16">
                    <div class="w3-left"><i class="fa fa-share-alt w3-xxxlarge"></i></div>
                    <div class="w3-right">
                        <h3>@ViewBag.grantedCount</h3>
                    </div>
                    <div class="w3-clear"></div>
                    <h4>Granted API </h4>
                </div>
            </div>
</body>
</html>

I’m amateure in html and css. I appreciate if any one suggest me a solution regarding to my problem.