Blog Help & Support Contact About Login

Try our chart library and Angular charts today!

AngularJS Graphs

ZingChart-AngularJS is a directive to create AngularJS graphs.
It allows ZingChart to work dynamically with your data.
Easy to set up. Style as you like. Access all the features.

See the Pen ZingChart AngularJS Graphs by ZingChart (@zingchart) on CodePen.

Start Using the Directive

Get your project going in a snap

Get Your Project Going in a Snap

Set up is quick and usage is easy. Render charts by adding a ZingChart configuration object as a scope variable. Use AngularJS's directive syntax. Either:

An element: <zingchart></zingchart>

OR

An attribute: <div zingchart></div>

For basic charts, just add data!

Leverage flexible data handling

Leverage Flexible Data Handling

Harness the power of AngularJS in your graphs! Simply allow the directive to watch for changes to the configuration and values of the chart. It will dynamically update thanks to Angular’s data-binding. The directive can be set up to watch for:

  • Updates to the graph’s data values
  • Changes in chart configuration attributes

Make Charts Look and Work *Just Right*

Customize your charts and graphs almost every way with the ZingChart library. From styling to interactions, you control it all.

See the Pen ZingChart-AngularJS - Customizable by ZingChart (@zingchart) on CodePen.

Use the power of a full library in Angular

Use the Power of a Full Library in Angular

This AngularJS directive is backed by a full JavaScript charting library, not a subset. The directive is a wrapper around ZingChart. Users can access the full capabilities of the library. No extra syntax required beyond our simple, CSS-like JSON.

Yes, Even Maps

Maps can easily be rendered utilizing the ZingChart library with the AngularJS directive.

See the Pen ZingChart-AngularJS-Map by ZingChart (@zingchart) on CodePen.

Use Responsive Sizing, Easily

Just allow ZingChart to resize dynamically. It will use the full width and height of the graph’s parent.

See the Pen ZingChart-AngularJS - Responsive by ZingChart (@zingchart) on CodePen.

Integrate ZingChart into Your AngularJS Application