Angular

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

1. Install

Install the zingchart-angular package via npm

$ npm install zingchart-angular

2. Include the component in your project

Include the module in your module declaration file.

import { ZingchartAngularModule } from 'zingchart-angular';

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

Usage

Define your chart configuration in your component.

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

Add your component to the markup

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

Parameters

config [object]

config:zingchart.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:zingchart.series = {
  values: [3,6,4,6,4,6,4,6]
}
config:zingchart.graphset = {
  type: 'line',
  series: [this.series]
};
  <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.

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(ev) {
    console.log('on complete!');
  }
}

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 add a new plot node to 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 complete documentation on https://www.zingchart.com/docs/methods