DashByte - Premium Dashboard Template

Charts And Graphs

Morris

Morris is the library that have a very simple API for drawing line, bar, area and donut charts. Read the Official Morris Documentation for new updates, instructions and other options.

Bar Chart

Below is the basic bar chart example.

new Morris.Bar({
  element: 'morrisBar',
  data: morrisData2,
  xkey: 'y',
  ykeys: ['a', 'b', 'c'],
  labels: ['Series A', 'Series B', 'Series C'],
  barColors: ['#5774da', '#C4DDFF','#a8b5c3'],
  gridLineColor: '#e5e9f2',
  gridStrokeWidth: 1,
  gridTextSize: 11,
  hideHover: 'auto',
  resize: true
});

Stacked Bar Chart

Below is the basic stacked bar chart example.

new Morris.Bar({
  element: 'morrisStacked',
  data: morrisData2,
  xkey: 'y',
  ykeys: ['a', 'b', 'c'],
  labels: ['Series A', 'Series B', 'Series C'],
  barColors: ['#5774da', '#C4DDFF','#a8b5c3'],
  stacked: true,
  gridLineColor: '#e5e9f2',
  gridStrokeWidth: 1,
  gridTextSize: 11,
  hideHover: 'auto',
  resize: true
});

Line Chart

Below is the basic line chart example.

new Morris.Line({
  element: 'morrisLine',
  data: [
    { y: '2006', a: 20, b: 10, c: 40 },
    { y: '2007', a: 30, b: 15, c: 45 },
    { y: '2008', a: 50, b: 40, c: 65 },
    { y: '2009', a: 40, b: 25, c: 55 },
    { y: '2010', a: 30, b: 15, c: 45 },
    { y: '2011', a: 45, b: 20, c: 65 },
    { y: '2012', a: 60, b: 40, c: 70 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b', 'c'],
  labels: ['Series A', 'Series B', 'Series C'],
  lineColors: ['#5774da', '#C4DDFF','#a8b5c3'],
  lineWidth: 1,
  ymax: 'auto 100',
  gridLineColor: '#e5e9f2',
  gridStrokeWidth: 1,
  gridTextSize: 11,
  hideHover: 'auto',
  resize: true
});

Area Chart

Below is the basic area chart example.

new Morris.Area({
  element: 'morrisArea',
  data: [
    { y: '2006', a: 20, b: 10, c: 40 },
    { y: '2007', a: 30, b: 15, c: 45 },
    { y: '2008', a: 50, b: 40, c: 65 },
    { y: '2009', a: 40, b: 25, c: 55 },
    { y: '2010', a: 30, b: 15, c: 45 },
    { y: '2011', a: 45, b: 20, c: 65 },
    { y: '2012', a: 60, b: 40, c: 70 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b', 'c'],
  labels: ['Series A', 'Series B', 'Series C'],
  lineColors: ['#5774da', '#C4DDFF','#a8b5c3'],
  lineWidth: 1,
  fillOpacity: 0.9,
  gridLineColor: '#e5e9f2',
  gridStrokeWidth: 1,
  gridTextSize: 11,
  hideHover: 'auto',
  resize: true
});

Donut Chart

Below is the basic donut chart example.