Creating Charts in Angular
Tags: angular, javascript, typescript
Published: 2020-02-06 18:14:09

We at ZingChart have been hard at work, creating a TypeScript Definition File and Angular component for our library!

## ZingChart — The last data visualization library you’ll need

[ZingChart](https://www.zingchart.com/?utm_source=devto&utm_medium=blog&utm_campaign=angular) is one of the original JavaScript charting libraries, and continues to innovate and improve on its feature set. With over 35 different chart types, a rich API of methods/events to integrate with, and a dedicated support team, ZingChart provides an all-in-one solution for your data visualization needs.

![ZingChart has over 35 different base chart types and hundreds of configurations
](https://thepracticaldev.s3.amazonaws.com/i/4qlobmhgurs4t6guoa5i.png)
_ZingChart has over 35 different base chart types and hundreds of configurations_

## Typescript Definition File

We have created a TypeScript definition file for the ZingChart library! All of the typings for our JSON configuration are now readily available, with descriptions for each attribute. This allows our developers who use TypeScript in their applications to validate their chart configurations with ease. This works well with IDEs such as Visual Studio Code that support type-ahead with descriptions. It is automatically included in our `zingchart-angular` component. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wq7hu3ttvp3fdmhadf2a.gif)


## Getting started with Angular 

If you don’t have an Angular Application, you can easily set one up with the [angular-cli](https://angular.io/cli)

`$ ng new my-app`

First we add the package to our Angular Application via NPM:

`$ npm i zingchart-angular`

We then add our chart module to our App's module.


```ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { ZingchartAngularModule } from 'zingchart-angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ZingchartAngularModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

```

Inside of the `app.component.ts`, we define the look and feel of our chart. We can use ZingChart's TypeScript Definition file to validate the JSON config:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'zing-app';
  config:zingchart.graphset = {
    type: 'line',
    series: [{
      values: [3,4,5,5,6,7,5,3]
    }]
  };
}

```

Finally, we add our a chart into our markup inside of `app.component.html`.

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

![https://stackblitz.com/edit/zingchart-angular-helloworld](https://thepracticaldev.s3.amazonaws.com/i/vx3lo8ylmpwtiwnlbv4f.png)
_[https://stackblitz.com/edit/zingchart-angular-helloworld](https://stackblitz.com/edit/zingchart-angular-helloworld)_

That was it! Only a few lines of code, and we have a fully reactive chart that updates when your data does.

## Reactivity

The `zingchart-angular` component is reactive to all of its properties — from the [chart configuration](https://www.notion.so/zingsoft/Create-Charts-in-Angular-4b0ed60abc0c4654a810e540752708a2#1f1a27fd0bd84066ba86c036e860537b) to the data. If any changes are sent to the component, the chart is re-rendered automatically.

![https://stackblitz.com/edit/zingchart-angular-reactivity](https://thepracticaldev.s3.amazonaws.com/i/vemhhvzp2txrj8hdxzqk.gif)

_[https://stackblitz.com/edit/zingchart-angular-reactivity](https://stackblitz.com/edit/zingchart-angular-reactivity)_

## Events and Methods — Tying your app together with ZingChart

The revised ZingChart component is all about connectivity to your Angular component. Events are automatically bound to the function you provide via props, and all available [ZingChart methods](https://www.notion.so/zingsoft/Create-Charts-in-Angular-4b0ed60abc0c4654a810e540752708a2#cf40be76ac6549a3890f2eebd700f61d) are available when you access a specific component via refs.

### Events

By binding a function to a known ZingChart event prop, we can perform custom actions when a chart emits an event. In the example below the event `node_mouseover` is emitted and its contents are displayed.

`<zingchart-angular [config]="config" [height]="300" (node_mouseover)="onNodeMouseover($event)"></zingchart-angular>`

![https://stackblitz.com/edit/zingchart-angular-event](https://thepracticaldev.s3.amazonaws.com/i/0l700hwurzbt5llxw7ay.gif)

_[https://stackblitz.com/edit/zingchart-angular-event](https://stackblitz.com/edit/zingchart-angular-event)_

I highly recommend checking out all of [ZingChart's events](https://www.zingchart.com/docs/api/events?utm_source=devto&utm_medium=blog&utm_campaign=angular) to see what is available to you.

### Methods

Methods can be called when a ref is given to the component, and a known method is called from the instance of the component. Below is an example of dynamically adding a plot, from a custom button created in Angular.

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

...
    export class AppComponent {
      ...

    obtainData() {
      console.log(this.chart.getdata());
    }
```

![https://stackblitz.com/edit/zingchart-angular-method](https://thepracticaldev.s3.amazonaws.com/i/0io36qs65s1iqgujbhld.gif)

_[https://stackblitz.com/edit/zingchart-angular-method](https://stackblitz.com/edit/zingchart-angular-method)_

I recommend reviewing [ZingChart's available methods](https://www.zingchart.com/docs/api/methods?utm_source=devto&utm_medium=blog&utm_campaign=angular).

## Get Charting!

With a better understanding of ZingChart and its Angular component, all you need is to include it into your application. Head over to our Github repository for the full documentation of the component: [https://github.com/zingchart/zingchart-angular](https://github.com/zingchart/zingchart-angular)

_A pioneer in the world of data visualization, ZingChart is a powerful Javascript library built with big data in mind. With over 35 chart types and easy integration with your development stack, ZingChart allows you to create interactive and responsive charts with ease._