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'