chart

<div class="header">
  <div class="container-fluid">

    <!-- Body -->
    <div class="header-body">
      <div class="row align-items-end">
        <div class="col">

          <!-- Title -->
          <h1 class="header-title">
            Chart Siswa
          </h1>

        </div>
      </div> <!-- / .row -->
    </div> <!-- / .header-body -->

  </div>
</div> <!-- / .header -->
<div class="card-group">
<div class="card">
    <div  class="chart col-md-12">
 <canvas class="chart-canvas" id="feedChart"></canvas>
</div>

<script>
new Chart('feedChart', {
type: 'bar',
options: {
  scales: {
    yAxes: [{
      ticks: {
        callback: function(value) {
          return '$' + value + 'k';
        }
      }
    }]
  }
},
data: {
  labels: [],
  datasets: [{
    label: 'Sales',
    data: []
  }]
}
});
</script>
</div>

<div class="card">
<div class="chart chart-appended col-md-10">
<canvas class="chart-canvas" id="trafficChart" data-toggle="legend" data-target="#trafficChartLegend"></canvas>
</div>

<div class="chart-legend" id="trafficChartLegend"></div>

<script>
new Chart('trafficChart', {
  type: 'doughnut',
  options: {
    tooltips: {
      callbacks: {
        afterLabel: function() {
          return '%'
        }
      }
    }
  },
  data: {
    labels: ['Laki-Laki', 'Perempuan'],
    datasets: [{
      data: [{perempuan}, 15],
      backgroundColor: ['#2C7BE5', '#A6C5F7']
    }]
  }
});
</script>
</div>