Bar Chart

Below is the basic bar chart example.

Javascript Code

var ctx = document.getElementById('chartBar1').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: '# of Votes',
      data: [12, 39, 20, 10, 25, 18],
      backgroundColor: '#27AAC8'
    }]
  },
  options: {
    legend: {
      display: false,
        labels: {
          display: false
        }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true,
          fontSize: 10,
          max: 80
        }
      }],
      xAxes: [{
        ticks: {
          beginAtZero:true,
          fontSize: 11
        }
      }]
    }
  }
});

Multiple Color Code

backgroundColor: [
  '#29B0D0',
  '#2A516E',
  '#F07124',
  '#CBE0E3',
  '#979193'
]

Horizontal Bar Chart

Below is the horizontal bar chart type example.

Horizontal Type Code

type: 'horizontalBar'

Stacked Bar Chart

Below are the vertical and horizontal bar chart example.

Source Code

scales: {
  yAxes: [{
    stacked: true
  }],
  xAxes: [{
    stacked: true
  }]
}

Line Chart

Below is the basic line chart example.

Source Code

type: 'line'

Area Chart

Below is the basic an area chart example.

Source Code

datasets: [{
  data: [12, 39, 20, 10, 25, 18],
  fill: true,
}]

Specific Grid Line Color

Below are an example of specific grid line coloring.

Source Code

options: {
  scales: {
    yAxes: [{
      gridLines: {
        color: ['', '', '#cc0000'] // the line color series
      }
    }]
  }
}

Pie & Donut Chart

Below are an example of data in a pie and donut chart.

var pie = document.getElementById('chartDonut');
var myPieChart = new Chart(pie, {
  type: 'pie',
  data: data,
  options: option
});

var pie = document.getElementById('chartDonut');
var myPieChart = new Chart(pie, {
  type: 'doughnut',
  data: data,
  options: option
});