• Getting Started

  • Data

  • Chart Types

  • Chart Elements

  • Integrations

  • API

  • Tools

  • FAQ

  • Change Log

    •

    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/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/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.