Bar Chart

Below is the basic bar chart example.

Source Code

var bar1 = new Rickshaw.Graph({
element: document.querySelector('#chartBar1'),
renderer: 'bar',
max: 80,
series: [{
  data: [
    { x: 0, y: 40 },
    { x: 1, y: 49 },
    { x: 2, y: 38 },
    { x: 3, y: 30 },
    { x: 4, y: 32 }
  ],
  color: '#26A2E2'
}]
});
bar1.render();

Stacked Bar Chart

Below is the stacked bar chart example.

Source Code

series: [{
  data: [
    { x: 0, y: 20 },
    { x: 1, y: 30 },
    { x: 2, y: 10 },
    { x: 3, y: 15 },
    { x: 4, y: 10 }
  ],
  color: '#466C79'
},
{
  data: [
    { x: 0, y: 10 },
    { x: 1, y: 10 },
    { x: 2, y: 15 },
    { x: 3, y: 20 },
    { x: 4, y: 12 }
  ],
  color: '#26A2E2'
}

Multiple Bar Chart

Below are multiple bar chart example.

Additional Option Code

stack: false

Line Chart

Below is the line chart example.

Option Code

rendered: 'line'

Area Chart

Below is the area chart example.

Option Code

renderer: 'area'