Bar Chart

Below is the basic bar chart example.

Javascript Code

new Chart(document.getElementById('morrisBar1'), {
  type: 'bar',
  data: {
    labels: ['2006', '2007', '2008', '2009', '2010'],
    datasets: [
      { label: 'Series A', data: [100, 75, 50, 75, 50], backgroundColor: '#5058AB' },
      { label: 'Series B', data: [90, 65, 40, 65, 40], backgroundColor: '#14A0C1' }
    ]
  }
});

For stacked bar, just add

scales: {
  y: { stacked: true },
  x: { stacked: true }
}

For additional data

datasets: [
  { label: 'Series A', data: [100, 75, 50, 75], backgroundColor: '#5058AB' },
  { label: 'Series B', data: [90, 65, 40, 65], backgroundColor: '#14A0C1' },
  { label: 'Series C', data: [80, 75, 45, 85], backgroundColor: '#01CB99' }
]

Line Chart

Below is the basic line chart example.

Javascript Code

new Chart(document.getElementById('morrisLine1'), {
  type: 'line',
  data: { ... }
});

Area Chart

Below is the basic area chart example.

Javascript Code

new Chart(document.getElementById('morrisArea1'), {
  type: 'line',
  data: {
    datasets: [{ fill: true, backgroundColor: 'rgba(20,160,193,.5)', ... }]
  }
});

Donut Chart

Below is the basic donut chart example.

Javascript Code

new Chart(document.getElementById('morrisDonut1'), {
  type: 'doughnut',
  data: {
    labels: ['Men', 'Women', 'Kids'],
    datasets: [{
      data: [12, 30, 20],
      backgroundColor: ['#3D449C', '#268FB2', '#74DE00']
    }]
  }
});