An AngularJS directive to allow ZingChart to work dynamically with data.
Render charts simply by adding a ZingChart configuration object as a scope variable
Charts can be extensively customized with the ZingChart library.
Data Binding
Utilize the power of Angular by allowing the directive to watch for changes to the configuration and the values of the chart, and dynamically update.
Fully Capable
The directive is simply a wrapper around ZingChart allowing users to have full capabilites of the library.
Maps can easily be rendered utilizing the ZingChart library.
Allow ZingChart to resize dynamically to the full width and height of it's parent. Drag the bottom right hand corner to see the responsiveness.
AJAX / Real-time
Fetch new data using AJAX, change the scope variable, automatically update the chart!
Integrate ZingChart into your AngularJS application.
Simple to use AngularJS's directive syntax available as either :
An element: <zingchart></zingchart>
An attribute: <div zingchart></div>
For basic charts, just add data!
Feature Complete

The directive simply adds dynamic data-binding to your configuration object and/or data. No extra syntax, only the ZingChart syntax you know and love. This allows users to access all features provided by the main ZingChart library


Utilize AngularJS's two-way data-binding by allowing this directive to watch for changes. The directive can be set up to watch for the chart's data values, or even chart configuration attributes.

1. Include the following dependencies into your HTML file
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="zingchart.min.js"></script>
<script type="text/javascript" src="zingchart-angularjs.js"></script>
2. Inject the directive into your application
angular.module('myApp', ['zingchart-angularjs']);
3. Insert the ZingChart-AngularJS directive into your HTML
<zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></zingchart>
4. Configure your chart through a scope variable
$scope.myJson = {
    type : 'line',
    series : [
      { values : [54,23,34,23,43] },
      { values : [10,15,16,20,40] }
5. Try!
Next Steps
Need to squeeze out performance?
Want to learn more about it's other features?