Chart JS header small text goes here...

Line Chart

A line chart is a way of plotting data points on a line. Often, it is used to show trend data, and the comparison of two data sets.

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

<!-- html -->
<canvas id="line-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 randomScalingFactor = function() { 
    return Math.round(Math.random()*100)
  };

  var ctx = document.getElementById('line-chart').getContext('2d');
  var lineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [{
        label: 'Dataset 1',
        borderColor: app.color.blue,
        pointBackgroundColor: app.color.componentBg,
        pointRadius: 4,
        borderWidth: 2,
        backgroundColor: 'rgba('+ app.color.blueRgb + ', .3)',
        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
      }, {
        label: 'Dataset 2',
        borderColor: 'rgba('+ app.color.componentColorRgb + ', .75)',
        pointBackgroundColor: app.color.componentBg,
        pointRadius: 4,
        borderWidth: 2,
        backgroundColor: 'rgba('+ app.color.componentColorRgb + ', .5)',
        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
      }]
    }
  });
</script>

Bar Chart

A bar chart is a way of showing data as bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.

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

<!-- html -->
<canvas id="bar-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 randomScalingFactor = function() { 
    return Math.round(Math.random()*100)
  };

  var ctx2 = document.getElementById('bar-chart').getContext('2d');
  var barChart = new Chart(ctx2, {
    type: 'bar',
    data: {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [{
        label: 'Dataset 1',
        borderWidth: 1,
        borderColor: app.color.indigo,
        backgroundColor: 'rgba('+ app.color.indigoRgb + ', .3)',
        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
      }, {
        label: 'Dataset 2',
        borderWidth: 1,
        borderColor: 'rgba('+ app.color.componentColorRgb + ', .85)',
        backgroundColor: 'rgba('+ app.color.componentColorRgb + ', .3)',
        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
      }]
    }
  });
</script>

Radar Chart

A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.

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

<!-- html -->
<canvas id="radar-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 ctx3 = document.getElementById('radar-chart').getContext('2d');
  var radarChart = new Chart(ctx3, {
    type: 'radar',
    data: {
      labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
      datasets: [{
        label: 'Dataset 1',
        borderWidth: 2,
        borderColor: app.color.red,
        pointBackgroundColor: app.color.red,
        pointRadius: 2,
        backgroundColor: 'rgba('+ app.color.redRgb + ', .2)',
        data: [65,59,90,81,56,55,40]
      }, {
        label: 'Dataset 2',
        borderWidth: 2,
        borderColor: app.color.componentColor,
        pointBackgroundColor: app.color.componentColor,
        pointRadius: 2,
        backgroundColor: 'rgba('+ app.color.componentColorRgb + ', .2)',
        data: [28,48,40,19,96,27,100]
      }]
    }
	});
</script>

Polar Area Chart

Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.

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

<!-- html -->
<canvas id="polar-area-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 ctx4 = document.getElementById('polar-area-chart').getContext('2d');
  var polarAreaChart = new Chart(ctx4, {
    type: 'polarArea',
    data: {
      labels: ['Dataset 1', 'Dataset 2', 'Dataset 3', 'Dataset 4', 'Dataset 5'],
      datasets: [{
        data: [300, 160, 100, 200, 120],
        backgroundColor: ['rgba('+ app.color.indigoRgb + ', .7)', 'rgba('+ app.color.blueRgb + ', .7)', 'rgba('+ app.color.successRgb + ', .7)', 'rgba('+ app.color.gray300Rgb + ', .7)', 'rgba('+ app.color.gray900Rgb + ', .7)'],
        borderColor: [app.color.indigo, app.color.blue, app.color.success, app.color.gray300, app.color.gray900],
        borderWidth: 2,
        label: 'My dataset'
      }]
    }
  });
</script>

Pie Chart

Pie and doughnut charts are probably the most commonly used chart there are. They are divided into segments, the arc of each segment shows the proportional value of each piece of data.

<!-- required files -->
<script src="../assets/plugins/chart.js/dist/Chart.min.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>

Doughnut Chart

Pie and doughnut charts are registered under two aliases in the Chart core. Other than their different default value, and different alias, they are exactly the same.

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

<!-- html -->
<canvas id="doughnut-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 ctx6 = document.getElementById('doughnut-chart').getContext('2d');
  window.myDoughnut = new Chart(ctx6, {
    type: 'doughnut',
    data: {
      labels: ['Dataset 1', 'Dataset 2', 'Dataset 3', 'Dataset 4', 'Dataset 5'],
      datasets: [{
        data: [300, 50, 100, 40, 120],
        backgroundColor: ['rgba('+ app.color.indigoRgb + ', .7)', 'rgba('+ app.color.blueRgb + ', .7)', 'rgba('+ app.color.successRgb + ', .7)', 'rgba('+ app.color.gray300Rgb + ', .7)', 'rgba('+ app.color.gray900Rgb + ', .7)'],
        borderColor: [app.color.indigo, app.color.blue, app.color.success, app.color.gray300, app.color.gray900],
        borderWidth: 2,
        label: 'My dataset'
      }]
    }
  });
</script>
App Settings
Dark Mode NEW
Adjust the appearance to reduce glare and give your eyes a break.
Header Fixed
Header Inverse
Sidebar Fixed
Admin Design (5)
Language Version (7)
Frontend Design (5)
Documentation Reset Local Storage