Bar Chart

Below is the basic bar chart example.

Javascript Code

new Morris.Bar({
  element: 'morrisBar1',
  data: [
    { y: '2006', a: 100, b: 90 },
    { y: '2007', a: 75,  b: 65 },
    { y: '2008', a: 50,  b: 40 },
    { y: '2009', a: 75,  b: 65 },
    { y: '2010', a: 50,  b: 40 },
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B'],
  barColors: ['#5058AB', '#14A0C1'],
  gridTextSize: 11,
  hideHover: 'auto',
  resize: true
});

For stacked bar, just add

stacked: true

For additional data

data: [
  { y: '2006', a: 100, b: 90, c: 80 },
  { y: '2007', a: 75,  b: 65, c: 75 },
  { y: '2008', a: 50,  b: 40, c: 45 },
  { y: '2009', a: 75,  b: 65, c: 85 },
],
ykeys: ['a', 'b', 'c'],
labels: ['Series A', 'Series B', 'Series C'],
barColors: ['#5058AB', '#14A0C1','#01CB99']

Line Chart

Below is the basic line chart example.

Javascript Code

new Morris.Line({ ... );

Area Chart

Below is the basic area chart example.

Javascript Code

new Morris.Area({ ... );

Donut Chart

Below is the basic donut chart example.

Javascript Code

new Morris.Donut({
  element: 'morrisDonut1',
  data: [
    {label: "Men", value: 12},
    {label: "Women", value: 30},
    {label: "Kids", value: 20}
  ],
  colors: ['#3D449C','#268FB2','#74DE00'],
  resize: true
});