Chartjs-How do I align chart.js pie charts?

by

0👍

✅

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>

1👍

Something like this with grid layout can help you

.full-width {
  height: 100px;
  margin-bottom: 1em;
  background: #ccc;
}

.one-by-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
}

.one-by-two .item {
  height: 100px;
  background: #ccc;
}
<div class="container">
  <div class="full-width">
    <!-- canvas -->
  </div>
  <div class="one-by-two">
    <div class="item">
      <!-- canvas -->
    </div>
    <div class="item">
      <!-- canvas -->
    </div>
  </div>
</div>

Leave a comment