Docs Back to Docs

Angular

zingchart-angular is an Angular Typescript directive to allow ZingChart to work dynamically with data. Quickly add charts to your Angular application with our ZingChart component. This guide assumes some basic working knowledge of Angular. You can view the full component on GitHub or NPM.

This guide assumes some basic working knowledge of Angular and its object oriented interface.

1. Install

Install the zingchart package via npm: npm install zingchart

Install the zingchart-angular package via npm: npm install zingchart-angular

Note: For newer versions of the angular-cli, you may run into an NPM install error due to @angular/common. In this case, use the following:
npm install zingchart --legacy-peer-deps
npm install zingchart-angular --legacy-peer-deps

2. Include the zingchartAngular module in your project

You can import the module in your module declaration file. This is typically app.module.ts for many hello world examples.

import { ZingchartAngularModule } from 'zingchart-angular';

@NgModule({
  imports: [
    ...
    ZingchartAngularModule,
  ],
})

3. Define ZingChart in your component

The zingchart/es6 library is a direct dependency of the ZingchartAngularModule and you do not have to explicitly import the ZingChart library.

Default Use Case

The simple use case is defining a config (ZingchartAngular.graphset) object in your .component.ts file:

import { Component } from '@angular/core';

@Component({
  templateUrl: '...',
  styleUrls: ['...']
})

export class AppComponent {
  config: ZingchartAngular.graphset = {
    type: 'line',
    series: [{
      values: [3,6,4,6,4,6,4,6]
    }],
  };
}

Then add the zingchart-angular tag in your .component.html file to tie it all together!

<zingchart-angular [config]="config" [height]="500"></zingchart-angular>

Import ZingChart Modules

You must EXPLICITLY IMPORT MODULE CHARTS. There are NO default export objects so you must import them.

import { Component } from '@angular/core';
// EXPLICITLY IMPORT MODULE from node_modules
import "zingchart/modules-es6/zingchart-maps.min.js";
import "zingchart/modules-es6/zingchart-maps-usa.min.js";

@Component({
  templateUrl: '...',
  styleUrls: ['...']
})

export class AppComponent {
  config: ZingchartAngular.graphset = {
    shapes: [
      {
        type: "zingchart.maps",
        options: {
          name: "usa",
          ignore: ["AK", "HI"]
        }
      }
    ]
  };
}

zingchart Global Objects

If you need access to the window.zingchart objects for licensing or development flags.

import { Component } from '@angular/core';
import zingchart from 'zingchart/es6';

// zingchart object for performance flags
zingchart.DEV.KEEPSOURCE = false; // prevents lib from storing the original data package
zingchart.DEV.COPYDATA = false; // prevents lib from creating a copy of the data package 

// ZC object for license key
zingchart.LICENSE = ['your_zingchart_license_key'];
// for enterprise licensing
zingchart.BUILDCODE = ['your_zingchart_license_buildcode'];

@Component({
  templateUrl: '...',
  styleUrls: ['...']
})

export class AppComponent {
  config: ZingchartAngular.graphset = {
    type: 'line',
    series: [{
      values: [3,6,4,6,4,6,4,6]
    }],
  };
}

Parameters

config [object]

The chart configuration (graphset)

config: ZingchartAngular.graphset = {
  type: 'line',
  series: [{
    values: [3,6,4,6,4,6,4,6]
  }],
};

<zingchart-angular [config]="config" [height]="500"></zingchart-angular>

id [string] (optional)

The id for the DOM element for ZingChart to attach to. If no id is specified, the id will be autogenerated in the form of zingchart-angular-#

series [array] (optional)

Accepts an array of series objects, and overrides a series if it was supplied into the config object. Varies by chart type used - Refer to the ZingChart documentation for more details.

series: ZingchartAngular.series = {
  values: [3,6,4,6,4,6,4,6]
}
config: ZingchartAngular.graphset = {
  type: 'line',
};

<zingchart-angular [config]="config" [height]="500" [series] = "[series]"></zingchart-angular>

width [string or number] (optional)

The width of the chart. Defaults to 100%

height [string or number] (optional)

The height of the chart. Defaults to 480px.

output [string] (optional)

The render type of the chart. The default is svg but you can also pass the string canvas to render the charts in canvas.

theme [object] (optional)

The theme or 'defaults' object defined by ZingChart. More information available here: https://www.zingchart.com/docs/api/themes

Events

All ZingChart Events are readily available on the component to listen to. For example, to listen for the 'complete' event when the chart is finished rendering:

<zingchart-angular[config]="config" [height]="300" (complete)="onComplete($event)"></zingchart-angular>

  export class AppComponent {
      ...
    onComplete(event) {
      console.log('zingchart on complete fired!', event);
    }
  }

For a list of all the events that you can listen to, refer to the complete documentation on https://www.zingchart.com/docs/events

Methods

All ZingChart Methods are readily available on the component's instance to call. For example, to retrieve data from the chart:

<zingchart-angular #chart1 [config]="config"></zingchart-angular>

    export class AppComponent {
      ...

    obtainData() {
      return this.chart.getdata();
    }

  }

For a list of all the methods that you can call and the parameters each method can take, refer to the ZingChart Method Reference.

Extending Type Definition File

Custom tokens and user-specified properties are omitted from the zingchart-angular wrapper type definition file (TDF).

Check out this blog post on how to extend the TDF with your own properties.

AngularJs

You can view the full component on GitHub.

Basic

Render AngularJs charts simply by adding a ZingChart configuration object as a scope variable.

Customizable

Charts can be extensively customized with the ZingChart library.

Data Binding

Utilize the power of AngularJS 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 capabilities of the library.

Maps

Maps can easily be rendered utilizing the ZingChart library

Responsive

Allow ZingChart to resize dynamically to the full width and height of its parent. Drag the bottom right hand corner to see the responsiveness.

AJAX / Real-time

Fetch new data using AJAX, change the scope variable, and automatically update the chart!

Integrate ZingChart into your AngularJS application.

Directive

Simple to use AngularJS's directive syntax is available as either:
An element: <zingchart></zingchart>
OR
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

Data-Binding

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.

Usage

  1. Include the following dependencies into your HTML file

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="http://cdn.zingchart.com/angular/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!

License

Adding your license key to your AngularJS application is slightly different than with the standard ZingChart library.

In your template, add zc-license="zcLicense". Then, in your script, add your license key.

<div ng-controller="MainController">
  <zingchart id="chart-1" zc-values="myValues" zc-json="myObj" zc-license="zcLicense"></zingchart>
</div>
app.controller('MainController', function ($scope) {
  $scope.zcLicense = ['<your license here>'];

Next Steps

Need to squeeze out performance? Want to learn more about its other features?

To read more about ZingChart and AngularJS, check out our GitHub and View our Blog Post.