Creating interactive charts in Angular just got easier

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.

Laptop illustration with the Vue.js logo on its screen

Curious to see how it works?

We created a step-by-step tutorial showing you exactly how to quickly add our library and start generating charts.

Play with the live demo to see the Angular component for ZingChart in action!

Integrate ZingChart in your next Angular project

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
ZingChart logo

Ready to create mobile-friendly charts with ZingChart's 35+ built-in chart types and 25+ features?

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:

Mobile phone illustration with two radar charts on its screen

Charts for Financial Data

Screenshot of a financial area chart Read More

Charts for Analytics Data

Screenshot of an analytics line chart Read More

Charts for Healthcare Data

Screenshot of a healthcare scatter plot chart Read More

Charts for Sales Data

Screenshot of a sales chart dashboard Read More

Get started with just a few lines of code

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>


View on GitHub