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: {
    plugins: {
      legend: { display: false }
    },
    scales: {
      y: { beginAtZero: true, max: 80 },
      x: {}
    }
  }
});

Multiple Color Code

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

Horizontal Bar Chart

Below is the horizontal bar chart type example.

Horizontal Type Code

type: 'bar',
indexAxis: 'y'

Stacked Bar Chart

Below are the vertical and horizontal bar chart example.

Source Code

scales: {
  y: { stacked: true },
  x: { 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: {
    y: {
      grid: {
        // called once per gridline; return a color per index
        color: (context) => context.index === 2 ? '#cc0000' : 'rgba(0,0,0,.1)'
      }
    }
  }
}

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
});