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: COLOR_BLUE,
        backgroundColor: hexToRgba(COLOR_BLUE, .2),
        borderColor: COLOR_BLUE,
        borderWidth: 1.5,
        pointBackgroundColor: COLOR_WHITE,
        pointBorderWidth: 1.5,
        pointRadius: 4,
        pointHoverBackgroundColor: COLOR_BLUE,
        pointHoverBorderColor: 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: hexToRgba(COLOR_BLUE, .2),
        borderColor: COLOR_BLUE,
        borderWidth: 1.5
      },{
        label: 'New Visitors',
        data: [12,16,20,14,23,21],
        backgroundColor: hexToRgba(COLOR_GRAY_500, .2),
        borderColor: COLOR_GRAY_500,
        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: hexToRgba(COLOR_BLUE, .2),
          borderColor: COLOR_BLUE,
          pointBackgroundColor: COLOR_WHITE,
          pointBorderColor: COLOR_BLUE,
          pointHoverBackgroundColor: COLOR_BLUE,
          pointHoverBorderColor: COLOR_WHITE,
          data: [65, 59, 90, 81, 56, 55, 40],
          borderWidth: 1.5
        },
        {
          label: 'Desktop',
          backgroundColor: hexToRgba(COLOR_GRAY_500, .2),
          borderColor: COLOR_GRAY_500,
          pointBackgroundColor: COLOR_WHITE,
          pointBorderColor: COLOR_GRAY_500,
          pointHoverBackgroundColor: COLOR_GRAY_500,
          pointHoverBorderColor: 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: [hexToRgba(COLOR_BLUE, .85), hexToRgba(COLOR_INDIGO, .85), hexToRgba(COLOR_AQUA, .85), hexToRgba(COLOR_GRAY_500, .85), hexToRgba(COLOR_GRAY_800, .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: [COLOR_BLUE, COLOR_INDIGO, COLOR_GRAY_900],
        hoverBackgroundColor: [COLOR_BLUE, COLOR_INDIGO, COLOR_GRAY_900],
        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: [COLOR_BLUE, COLOR_INDIGO, COLOR_GRAY_900],
        hoverBackgroundColor: [COLOR_BLUE, COLOR_INDIGO, COLOR_GRAY_900],
        borderWidth: 0
      }]
    }
  });
</script>