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

<!-- html -->
<canvas id="radarChart"></canvas>

<!-- script -->
<script>
  var ctx = document.getElementById('radarChart');
  var radarChart = new Chart(ctx, {
    type: 'radar',
    data: {
      labels: ['United States', 'Canada', 'Australia', 'Netherlands', 'Germany', 'New Zealand', 'Singapore'],
      datasets: [
        {
          label: 'Mobile',
          backgroundColor: 'rgba('+ app.color.themeRgb +', .25)',
          borderColor: app.color.theme,
          pointBackgroundColor: app.color.componentBg,
          pointBorderColor: app.color.theme,
          pointHoverBackgroundColor: app.color.componentBg,
          pointHoverBorderColor: app.color.theme,
          data: [65, 59, 90, 81, 56, 55, 40],
          borderWidth: 1.5
        },
        {
          label: 'Desktop',
          backgroundColor: 'rgba('+ app.color.secondaryRgb +', .25)',
          borderColor: app.color.secondary,
          pointBackgroundColor: app.color.componentBg,
          pointBorderColor: app.color.secondary,
          pointHoverBackgroundColor: app.color.componentBg,
          pointHoverBorderColor: app.color.secondary,
          data: [28, 48, 40, 19, 96, 27, 100],
          borderWidth: 1.5
        }
      ]
    }
  });
</script>