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.
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
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, ], })
The zingchart/es6
library is a direct dependency of the ZingchartAngularModule
and you do not have to explicitly import the ZingChart library.
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>
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"] } } ] }; }
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] }], }; }
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>
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-#
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>
The width of the chart. Defaults to 100%
The height of the chart. Defaults to 480px.
The render type of the chart. The default is svg
but you can also pass the string canvas
to render the charts in canvas.
The theme or 'defaults' object defined by ZingChart. More information available here: https://www.zingchart.com/docs/api/themes
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
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.
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.