[FIXED] How do I align chart.js pie charts?

Issue

I am trying to display a number of chart.js pie charts. I want the first one to be large and centred in the middle - which it is. But the problem is that I want 2 columns of charts underneath, but they aren't centred. There is also a large gap in between the charts that I don't know how to get rid of.

This is my css:

.chart-container{
            width:100%;
            height:480px;
            margin: auto;
        }
        .pie-chart-container,
        .doughnut-chart-container {
            height:360px;
            width:360px;
            float:left;
        }

HTML:

       <div>
            <div>
                <canvas id='chart8'></canvas>
            </div>
            <div class='doughnut-chart-container'>
                <canvas id='chart4'></canvas>
            </div>
            <div class='doughnut-chart-container'>
                <canvas id='chart5'></canvas>
            </div>

            <div class='doughnut-chart-container'>
                <canvas id='chart6'></canvas>
            </div>
            <div class='doughnut-chart-container'>
                <canvas id='chart7'></canvas>
            </div>
        </div>

I added padding to the top chart in the js, but the others don't have any padding.

Solution

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"],
    datasets: [{
      backgroundColor: [
        "#2ecc71",
        "#3498db",
        "#95a5a6",
        "#9b59b6",
        "#f1c40f",
        "#e74c3c",
        "#34495e"
      ],
      data: [12, 19, 3, 17, 28, 24, 7]
    }]
  },
  options: {
    legend: {
      display: false
    }
  }
});

.row {
  clear: both;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.cell {
  float: left;
  min-height: 200px;
  width: 24%;
  text-align: center;
  border: 1px solid black;
  min-width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<div class="row">
  <div class="cell">
    <canvas id="myChart"></canvas>
  </div>
  <div class="cell">12</div>
  <div class="cell">13</div>
  <div class="cell">14</div>
</div>
<div class="row">
  <div class="cell">21</div>
  <div class="cell">22</div>
  <div class="cell">23</div>
  <div class="cell">24</div>
</div>
<div class="row">
  <div class="cell">31</div>
  <div class="cell">32</div>
  <div class="cell">33</div>
  <div class="cell">34</div>
</div>
<div class="row">
  <div class="cell">41</div>
  <div class="cell">42</div>
  <div class="cell">43</div>
  <div class="cell">44</div>
</div>

Answered By - shrys

Answer Checked By - Marilyn (PHPFixing Volunteer)