Chart.js page header description goes here...

Basic Example

Chart.js is a simple yet flexible JavaScript charting for designers & developers. Please read the official documentation for the full list of options.

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

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

<!-- script -->
<script>
  var ctx = document.getElementById('lineChart');
  var lineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
      datasets: [{
        color: app.color.theme,
        backgroundColor: 'rgba('+ app.color.themeRgb +', .2)',
        borderColor: app.color.theme,
        borderWidth: 1.5,
        pointBackgroundColor: app.color.white,
        pointBorderWidth: 1.5,
        pointRadius: 4,
        pointHoverBackgroundColor: app.color.theme,
        pointHoverBorderColor: app.color.white,
        pointHoverRadius: 7,
        label: 'Total Sales',
        data: [12, 19, 4, 5, 2, 3]
      }]
    }
  });
</script>
BAR CHART
<!-- required js -->
<script src="/assets/plugins/chart.js/dist/chart.min.js"/></script>

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

<!-- script -->
<script>
  var ctx2 = document.getElementById('barChart');
  var barChart = new Chart(ctx2, {
    type: 'bar',
    data: {
      labels: ['Jan','Feb','Mar','Apr','May','Jun'],
      datasets: [{
        label: 'Total Visitors',
        data: [37,31,36,34,43,31],
        backgroundColor: 'rgba('+ app.color.themeRgb +', .2)',
        borderColor: app.color.theme,
        borderWidth: 1.5
      },{
        label: 'New Visitors',
        data: [12,16,20,14,23,21],
        backgroundColor: 'rgba('+ app.color.gray500Rgb +', .2)',
        borderColor: app.color.gray500,
        borderWidth: 1.5
      }]
    }
  });
</script>
RADAR CHART
<!-- required js -->
<script src="/assets/plugins/chart.js/dist/chart.min.js"/></script>

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

<!-- script -->
<script>
  var ctx3 = document.getElementById('radarChart');
  var radarChart = new Chart(ctx3, {
    type: 'radar',
    data: {
      labels: ['United States', 'Canada', 'Australia', 'Netherlands', 'Germany', 'New Zealand', 'Singapore'],
      datasets: [
        {
          label: 'Mobile',
          backgroundColor: 'rgba('+ app.color.themeRgb +', .2)',
          borderColor: app.color.theme,
          pointBackgroundColor: app.color.white,
          pointBorderColor: app.color.theme,
          pointHoverBackgroundColor: app.color.theme,
          pointHoverBorderColor: app.color.white,
          data: [65, 59, 90, 81, 56, 55, 40],
          borderWidth: 1.5
        },
        {
          label: 'Desktop',
          backgroundColor: 'rgba('+ app.color.gray500Rgb +', .2)',
          borderColor: app.color.gray500,
          pointBackgroundColor: app.color.white,
          pointBorderColor: app.color.gray500,
          pointHoverBackgroundColor: app.color.gray500,
          pointHoverBorderColor: app.color.white,
          data: [28, 48, 40, 19, 96, 27, 100],
          borderWidth: 1.5
        }
      ]
    }
  });
</script>
POLAR AREA CHART
<!-- required js -->
<script src="/assets/plugins/chart.js/dist/chart.min.js"/></script>

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

<!-- script -->
<script>
  var ctx4 = document.getElementById('polarAreaChart');
  var polarAreaChart = new Chart(ctx4, {
    type: 'polarArea',
    data: {
      datasets: [{
        data: [11, 16, 7, 3, 14],
        backgroundColor: ['rgba('+ app.color.themeRgb +', .85)', 'rgba('+ app.color.indigoRgb +', .85)', 'rgba('+ app.color.cyanRgb +', .85)', 'rgba('+ app.color.gray500Rgb +', .85)', 'rgba('+ app.color.gray800Rgb +', .85)'],
        borderWidth: 1.5
      }],
      labels: ['IE', 'Safari', 'Chrome', 'Firefox', 'Opera']
    }
  });
</script>
PIE CHART
<!-- required js -->
<script src="/assets/plugins/chart.js/dist/chart.min.js"/></script>

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

<!-- script -->
<script>
  var ctx5 = document.getElementById('pieChart');
  var pieChart = new Chart(ctx5, {
    type: 'pie',
    data: {
      labels: ['Total Visitor', 'New Visitor', 'Returning Visitor'],
      datasets: [{
        data: [300, 50, 100],
        backgroundColor: [app.color.theme, app.color.white, app.color.gray900],
        hoverBackgroundColor: [app.color.theme, app.color.white, app.color.gray900],
        borderWidth: 0
      }]
    }
  });
</script>
DOUGHNUT CHART
<!-- required js -->
<script src="/assets/plugins/chart.js/dist/chart.min.js"/></script>

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

<!-- script -->
<script>
  var ctx6 = document.getElementById('doughnutChart');
  var doughnutChart = new Chart(ctx6, {
    type: 'doughnut',
    data: {
      labels: ['Total Visitor', 'New Visitor', 'Returning Visitor'],
      datasets: [{
        data: [300, 50, 100],
        backgroundColor: [app.color.theme, app.color.white, app.color.gray900],
        hoverBackgroundColor: [app.color.theme, app.color.white, app.color.gray900],
        borderWidth: 0
      }]
    }
  });
</script>
Theme Color
 
 
 
 
 
 
 
 
 
 
 
 
Theme Cover