Chartjs-Two pie charts in one flexbox container

by

0👍

Chart.js needs an ‘exclusive’ parent element to ensure that it can size itself correctly. This effectively means you need to wrap all canvas elements in a relatively positioned div.

Here’s an example:

new Chart(document.getElementById('trans-status-chart'), {
  type: 'pie',
  data: {
    datasets: [{
      data: [43, 20, 44]
    }]
  },
  options: {}
});

new Chart(document.getElementById('targeted-gender-chart'), {
  type: 'pie',
  data: {
    datasets: [{
      data: [55, 82, 32]
    }]
  },
  options: {}
});
#pie-charts {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#pie-charts>div {
  width: 45% !important;
  height: auto !important;
  position: relative;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<section id="pie-charts">
  <div><canvas id="trans-status-chart" width="400" height="300"></canvas></div>
  <div><canvas id="targeted-gender-chart" width="400" height="300"></canvas></div>
</section>

Leave a comment