Documentation

1. Installation
2. Source Code
3. Usage
1. Line Chart
2. Grouped Bar Chart
3. Stacked Bar Chart
4. Histogram Chart
5. Pie Chart
6. Doughnut Chart

Installation

bower install --save canvas-charts

or

git clone https://github.com/borisovg/canvas-charts-dist.git

Source Code

https://github.com/borisovg/canvas-charts/

Usage

Full API docs can be found here.

The examples below show sample code for generating each type of graph.

By default, line and bar charts (except for histograms) support a maximum of 8 colours. Pie and doughnut charts support a maximum of 9 colours. If you are hitting these limits please consider simplifying your chart, or refer to the API docs for a constructor option to change the colours.

The default colours were picked to be friendly to colourblind people.

The bar and line charts support negative values.

Line Chart

• Edit

  var c = new charts.Line({
      canvas: document.getElementById('line1')
  }); 
  
  c.data([20, 25, 35, 50, 70, 95, 125], 0);
  c.data([30, 40, 50, 60, 70, 80, 90], 1);
  c.data([40, 50, 58, 64, 68, 70, 68], 2);
  
  c.labels('Days of the Week', 'Units of Stuff');
  c.scale(['Mon', false, 'Wed', false, 'Fri', false, 'Sun']);
  
  c.render();
  

Grouped Bar Chart

• Edit

  var c = new charts.GroupedBar({
      canvas: document.getElementById('bar1'),
  }); 
  
  c.data([20, 40, 60, 110, 45, 60, 10], 0);
  c.data([60, 80, 100, 150, 85, 100, 50], 1);
  
  c.labels('Days of the Week', 'Units of Stuff');
  c.scale(['Mon', false, 'Wed', false, 'Fri', false, 'Sun']);
  
  c.render();
  

Stacked Bar Chart

• Edit

  var c = new charts.StackedBar({
      canvas: document.getElementById('bar2'),
  }); 
  
  c.data([20, 40, 60, 100, 45, 60, 10], 0);
  c.data([60, 80, 100, 150, 85, 100, 50], 1);
  
  c.labels('Days of the Week', 'Units of Stuff');
  c.scale(['Mon', false, 'Wed', false, 'Fri', false, 'Sun']);
  
  c.render();
  

Histogram Chart

• Edit

  var c = new charts.Histogram({
      canvas: document.getElementById('histogram1')
  }); 
  
  c.data([20, 40, 60, 110, 80, 50, 10]);
  c.labels('Days of the Week', 'Units of Stuff');
  c.scale(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']);
  
  c.render();
  

Pie Chart

• Edit

  var c = new charts.Pie({
      canvas: document.getElementById('pie1')
  }); 
  
  c.data([20, 40, 60, 110, 45, 60, 10]);
  c.labels(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']);
  
  c.render();
  

Doughnut Chart

• Edit

  var c = new charts.Doughnut({
      canvas: document.getElementById('doughnut1'),
      centerText: 'Example\nChart'
  }); 
  
  c.data([20, 40, 60, 110, 45, 60, 10]);
  c.labels(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']);
  
  c.render();