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

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.