<section>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>


<div class="chart">
        <div class="row" style="margin:20px;width:150%;height:150%">
            <div id="cardChartCalories" class="card cardChart">
                <div class="card-header" style="color:black">
                    Qunantité de calories consommée par jour
                </div>
                <div class="card-body">
                    <canvas id="chartCalories"></canvas>
                </div>
            </div>
        </div>
        <div class="row">
            <div id="cardChartRepartition" class="card cardChart">
                <div class="card-header" style="color:black">
                    Répartition
                </div>
                <div class="card-body">
                    <canvas id="chartRegime"></canvas>
                </div>
            </div>
        </div>
    </div>


<script>
new Chart(document.getElementById("chartCalories"),{
    "type":"bar",
    "data":{"labels":["January","February","March","April","May","June","July"],
            "datasets":[{
                        "label":"calories en Kcal",
                        "data":[65,59,80,81,56,55,40],
                        "borderColor":"rgb(255, 205, 86)"}]},
    "options":{}
    });
new Chart(document.getElementById("chartRegime"),{
    "type":"pie",
    "data":{"labels":["Viande","Légumes/Fruits","Féculents"],
            "datasets":[{
                        "label":"Quantité de consommation",
                        "data":[300,50,100],
                        "backgroundColor":["rgb(255, 99, 132)","rgb(54, 162, 235)","rgb(255, 205, 86)"]}]}});
</script>

</section>
