Chartjs-Responsive ChartJS in Bootstrap Table Cell

by

0👍

here is simple implementation for creating chart using loops.
you may need to adjust color and data to get the desired result as you want in your expected result.

var ctx = document.getElementsByClassName('chart-container');
for (let i = 0; i < ctx.length; i++) {
  let chartref = ctx[i].getElementsByTagName('canvas')[0].getContext('2d');

  let myChart = new Chart(chartref, {
    type: 'doughnut',
    data: {
      labels: ['Blue', 'Grey'],
      datasets: [{
        label: '# of Votes',
        data: [10, 12, Math.random() * 4],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 0.3)'
        ],
      }]
    },
    options: {
      legend: {
        display: false
      },
      responsive: true,
      cutoutPercentage: 80,
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<td class="d-flex flex-row flex-wrap">
  <div class="chart-container flex-fill" style="position: relative; width: 8em;">
    <canvas id="chart"></canvas>
  </div>
  <div class="chart-container flex-fill" style="position: relative; width: 8em;">
    <canvas id="chart2"></canvas>
  </div>
  <div class="chart-container flex-fill" style="position: relative; width: 8em;">
    <canvas id="chart3"></canvas>
  </div>
  <div class="chart-container flex-fill" style="position: relative; width: 8em;">
    <canvas id="chart4"></canvas>
  </div>
</td>
<td class="">
  <div class="chart-container flex-fill" style="position: relative; width: 8em;">
    <canvas id="chart5"></canvas>
  </div>
  <div class="chart-container flex-fill" style="position: relative; width: 8em;">
    <canvas id="chart6"></canvas>
  </div>
  <div class="chart-container flex-fill" style="position: relative; width: 8em;">
    <canvas id="chart7"></canvas>
  </div>
  <div class="chart-container flex-fill" style="position: relative; width: 8em;">
    <canvas id="chart8"></canvas>
  </div>
</td>

Leave a comment