Implementing Different Chart Types in Angular

Nowadays, data is everywhere, and it is an important part of our lives. We collect, send, analyse, and do many other things with data. Data in itself is not visually appealing, but we can make it beautiful. Charts are one thing that can make data look beautiful and make it easier to understand and analyse. We can use different chart types to show data, depending on the type of data we are showing. In this article, we will see how to add, configure and use different chart types in Angular using CanvasJS angular charts.

Adding CanvasJS angular chart to project

Let's start by adding a CanvasJS angular chart component to the project. Download the component from the official download page. Copy the chart component files to the project. Generally, these files are kept under assets directory. Once copied, import & register the modules.

import { NgModule } from '[@angular](/angular)/core';
import { BrowserModule } from '[@angular](/angular)/platform-browser';
import { AppComponent } from './app.component';

import * as CanvasJSAngularChart from './assets/canvasjs.angular.component';
var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart;

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

As the modules are registered, you can start creating charts. Let's create and display a simple column chart in angular.

import { Component } from '[@angular](/angular)/core';

[@Component](/Component)({
  selector: 'app-root',
  template: '<canvasjs-chart [options]="chartOptions"></canvasjs-chart>'
})
export class AppComponent {
	chartOptions = {
	  title: {
		  text: "Angular Column Chart"
	  },
	  data: [{
		type: "column",
		dataPoints: [
			{ label: "apple",  y: 10  },
			{ label: "orange", y: 15  },
			{ label: "banana", y: 25  },
			{ label: "mango",  y: 30  },
			{ label: "grape",  y: 28  }
		]
	  }]
	}
}

Here we first imported the CanvasJS chart component and then defined the options for the chart. CanvasJS takes the data to be plotted, along with other chart element customization options, as "chart-options." In the above example, you can observe that labels are passed to each datapoint, which is shown below every bar (vertical bar charts are called a column chart). The same can be changed to a horizontal bar or line or pie chart simply by changing the type property. Similarly, you can render line, area, pie, doughnut, financial charts by changing type property accordingly.

Read full article @ www.c-sharpcorner.com