<!-- required files -->
<script src="../assets/plugins/chart.js/dist/chart.umd.js"></script>

<!-- html -->
<canvas id="pie-chart"></canvas>

<!-- script -->
<script>
  Chart.defaults.color = 'rgba('+ app.color.componentColorRgb + ', .65)';
  Chart.defaults.font.family = app.font.family;
  Chart.defaults.font.weight = 500;
  Chart.defaults.scale.grid.color = 'rgba('+ app.color.componentColorRgb + ', .15)';
  Chart.defaults.scale.ticks.backdropColor = 'rgba('+ app.color.componentColorRgb + ', 0)';

  var ctx5 = document.getElementById('pie-chart').getContext('2d');
  window.myPie = new Chart(ctx5, {
    type: 'pie',
    data: {
      labels: ['Dataset 1', 'Dataset 2', 'Dataset 3', 'Dataset 4', 'Dataset 5'],
      datasets: [{
        data: [300, 50, 100, 40, 120],
        backgroundColor: ['rgba('+ app.color.redRgb + ', .7)', app.color.orange_TRANSPARENT_7, 'rgba('+ app.color.gray500Rgb + ', .7)', 'rgba('+ app.color.gray300Rgb + ', .7)', 'rgba('+ app.color.gray900Rgb + ', .7)'],
        borderColor: [app.color.red, app.color.orange, app.color.gray500, app.color.gray300, app.color.gray900],
        borderWidth: 2,
        label: 'My dataset'
      }]
    }
  });
</script>