Bring the data in your Angular apps to life with ZingChart's powerful JavaScript API & built-in features using the official Angular wrapper for ZingChart.
We created a step-by-step tutorial showing you exactly how to quickly add our library and start generating charts.
Whether you’d like to use the free branded version of ZingChart or are looking to integrate ZingChart into your next OEM commercial project, take a look at our licensing options to see what’s right for you.
View Licensing Options
Charts are a necessity in most apps regardless of the industry you're developing for, so you'll usually need at least one chart to visualize industry-specific data.
ZingChart gives developers like you an all-in-one solution that's robust enough to handle most charting challenges, including those involving big data. Check out the following blog posts to learn about the different web development use cases that ZingChart is suited for across different industries:
1. Install via NPM
$ npm install zingchart-angular
2. Add our chart module to the app's module
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { ZingchartAngularModule } from 'zingchart-angular'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, ZingchartAngularModule, ], bootstrap: [AppComponent] }) export class AppModule { }
3. Define your chart configuration in your app
export default { export class AppComponent { title = 'zing-app'; config:zingchart.graphset = { type: 'line', series: [{ values: [3,4,5,5,6,7,5,3] }] }; }
4. Lastly, add the component to your markup
<zingchart-angular [config]="config" [height]="500"></zingchart-angular>
