AngularJS Charts with CanvasJS

This example uses CanvasJS to chart Nintendo’s console sales in an AngularJS app. Clicking Bootstrap nav-tabs trigger the Angular controller to change the chart type (bar, column, pie chart etc).


The file structure:

In index.html setup chartApp and add all the Angular directives, Bootstrap nav-tabs, and a div with id chartContainer for the CanvasJS chart:

<!DOCTYPE html>
<!DOCTYPE html>
<html ng-app="chartApp">
    <title>AngularJS Charts with CanvasJS</title>
    <link rel="stylesheet" href="//">
    <link rel="stylesheet" href="//">
    <script src=""></script>
    <script src="//"></script>
    <script src="canvasjs.min.js"></script>
    <script src="//"></script>
    <script src="app.js"></script>
    <script src="controllers.js"></script>
    <script src="directives.js"></script>
        .container {
            margin-top: 40px;
            width: 970px !important;
        #chartContainer {
            margin-top: 30px;
            height: 500px; 
            width: 100%;
    <div class="container" ng-controller="ChartController">
        <div class="row">
            <div class="col-xs-12">
                <ul class="nav nav-tabs" mc-toggle-active>
                    <li class="active"><a href="" ng-click="changeChartType('bar')">Bar</a></li>
                    <li><a href="" ng-click="changeChartType('column')">Column</a></li>
                    <li><a href="" ng-click="changeChartType('line')">Line</a></li>
                    <li><a href="" ng-click="changeChartType('area')">Area</a></li>
                    <li><a href="" ng-click="changeChartType('pie')">Pie</a></li>
                    <li><a href="" ng-click="changeChartType('doughnut')">Doughnut</a></li>
                    <li><a href="" ng-click="changeChartType('scatter')">Scatter</a></li>
        <div class="row">
            <div class="col-xs-12">
                <div id="chartContainer"></div>

In app.js assign the Angular app to a variable called app:

//chartApp does not have any dependencies
var app = angular.module('chartApp', []);

In controller.js setup the ChartController. This will create the chart and update it’s layout when the chart type changes:

//inject the $scope service into the controller
app.controller('ChartController', function($scope) {

    $scope.chart = new CanvasJS.Chart("chartContainer", {
        theme: 'theme1',
            text: "Nintendo Console Sales"              
        axisY: {
            title: "million units",
            labelFontSize: 16,
        axisX: {
            labelFontSize: 16,
        data: [              
                type: "bar",
                dataPoints: [
                    { label: "Wii U", y: 6.17 },
                    { label: "Wii", y: 101.06 },
                    { label: "GameCube", y: 21.74 },
                    { label: "64", y: 32.93 },
                    { label: "SNES", y: 49.10 },
                    { label: "NES", y: 61.91 },
                    { label: "3DS", y: 43.33 },
                    { label: "DS", y: 153.99 },
                    { label: "Advance", y: 81.51 },
                    { label: "GameBoy", y: 118.69 },

    $scope.chart.render(); //render the chart for the first time
    $scope.changeChartType = function(chartType) {
        $[0].type = chartType;
        $scope.chart.render(); //re-render the chart to display the new layout


In directives.js setup a custom directive to handle changing the nav-bar tabs active class:

//when a tab is clicked make it active
app.directive('mcToggleActive', function() {
	return {
		link: function(scope, element, attrs) {
			element.find('li').on('click', function() {

View a demo here. Download the source files.

- Bootstrap Disable Responsive
- CanvasJS Documentation

This entry was posted in Uncategorized. Bookmark the permalink.
  • Benjamin Soulas

    Hi, I tried to insert your example in my angular app, I inserted the canvasjs lib on my index.html file (it is located into an other folder, does it matters?) and the tag ” too. In my controller, I took all your code until ‘$scope.chart.render();’ , and when launch my app, i got this error :

    TypeError: b[a].render is not a function
    at w.render (http://localhost:3000/lib/canvasjs.min.js:84:478)

    If it can help, my server is a NodeJs using a Jade template Engine, I work with a MongoDB database but I am not sure it is relevant for my problem.

    So my question is do you have any idea where I am wrong?

    Kind regards.