tc-angular-chartjs

Documentation

Add Chart.js to your angular applications

tc-angular-chartjs provides you with directives for all chartjs chart types.

• Line Charts
• Bar Charts
• Radar Charts
• Polar Area Charts
• Pie Charts
• Doughnut Charts

You can see all the Chart.js Documentation on their website.

Installation

Grab the latest version of Chart.js and tc-angular-chartjs.

Load Chart.js and tc-angular-chartjs as you would with normal scripts.

<script type="text/javascript" src="js/Chart.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/tc-angular-chartjs.js"></script>

Make sure you use dist/tc-angular-chartjs.js or dist/tc-angular-chartjs.min.js

Require tc.chartjs in your application modules where you require Chart.js.

angular.module( 'app', ['tc.chartjs']);

Basic Usage

There are 6 different directives.

• tc-chartjs
• tc-chartjs-line
• tc-chartjs-bar
• tc-chartjs-radar
• tc-chartjs-polararea
• tc-chartjs-pie
• tc-chartjs-doughnut

Just place one of these directives on a canvas element to create a Chart.js chart.

<canvas tc-chartjs-doughnut width="350" height="350"></canvas>

You will also want to give the chart some data and options. These can be provided by assigning $scope variables to chart-options and chart-data attributes on the same canvas element.

<canvas tc-chartjs-doughnut chart-data="myData" chart-options="myOptions" chart-click="onChartClick(event)" width="350" height="350"></canvas>

$scope.myData = {
  datasets: [{
	label: "My First dataset",
	data: [
	  300,
	  50,
	  100
	],
	backgroundColor: [
	  "#F7464A",
	  "#46BFBD",
	  "#FDB45C"
	]
  }],
  labels: [
	"Red",
	"Green",
	"Yellow"
  ]
};

$scope.myOptions =  {
  // Chart.js options can go here.
};

$scope.onChartClick = function (event) {
  console.log(event);
};

Using the tc-chartjs directive

When using the tc-chartjs directive you will need to add an additional attribute to say which type of chart should be created.

Just attach a chart-type="" attribute to the canvas element.

<canvas tc-chartjs chart-type="doughnut" chart-data="data" chart-options="options" width="350" height="350"></canvas>

Available Types:

• line
• bar
• radar
• polararea
• pie
• doughnut

Passing another value to chart-type than the above will try to create a chart of that type, which is useful if you have extended Chart.js with custom chart types, e.g. through plugins.

Contributing

• Open a Pull Request (PR)
• Make sure your PR is on a new branch you created from the latest version of master branch
• Please do not open a PR from your master branch
• Open a PR even if your code is incomplete to start a discussion and to collect feedback
• Please make sure all unit tests pass, and add new tests for any added features.

License

tc-angular-chartjs is dual licensed with the Apache-2.0 or MIT license.

See LICENSE-APACHE-2.0 and LICENSE-MIT for more details.