AngularJS Chart Examples

Looking for examples of JavaScript charts implemented in AngularJS? The ZingChart team has assembled several demos of interactive charts made with the ZingChart-AngularJS directive.

By viewing these chart examples, you can learn how to take advantage of AngularJS’s two-way data binding and ZingChart’s easy-to-use syntax. Then, include rich, interactive charts in your AngularJS dashboards and applications.

AngularJS Chart Examples

Before we show you the examples, we think it is a good idea to show you how easy it is to get started with the ZingChart-AngularJS directive.

Setting Up Interactive AngularJS Charts

Include the following dependencies in your HTML file

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js" ></script>  
<script src = "https://cdn.zingchart.com/zingchart.min.js" ></script>  
<script src = "https://cdn.zingchart.com/angular/zingchart-angularjs.js" ></script>

Inject the directive into your application

angular.module ( 'myApp' , [ 'zingchart-angularjs' ]);

Insert the ZingChart-AngularJS directive into your HTML

<zingchart id = "myChart" zc-json = "myJson" zc-height = 500 zc-width = 600 ></zingchart>

Configure your chart through a scope variable

$scope.myJson = {  
  type : 'line' ,  
  series : [  
    { values : [ 54 , 23 , 34 , 23 , 43 ] },  
    { values : [ 10 , 15 , 16 , 20 , 40 ] }  
  ]  
};

Live AngularJS Chart Examples

Simple Pie Chart

Using AngularJS shouldn't mean compromising on features. So by adding a wrapper around ZingChart, you can access all the capabilities.

Here is a simple example of the wrapper:

Data-binding in Action

The directive watches for changes to the chart configurations and values, and then dynamically updates.

Try it by adding random values with the append button, or by changing the title text in this demo:

Responsive AngularJS Charts

ZingChart works well with responsive websites simply by setting zc-height and zc-width to 100%. ZingChart will automatically expand to its parent HTML element. Whenever the parent element's dimensions change, ZingChart will adapt to it and re-render the chart as well.

Drag the bottom right hand corner of this chart to see the responsive option when using the ZingChart-AngularJS directive:

Conclusion

Hopefully, this takes some of the technical load off you as you proceed to add AngularJS charts to your projects. To make things even easier, we have three places for you to go next: