In this article we will learn how to add ngx-charts in angular.
Let’s start :
Step 1 : install Ngx-charts in your angular application
npm i @swimlane/ngx-charts
Step 2 : After Installing the ngx-chart now import the ngx-chart in app.module.ts.
app.module.ts
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgxChartsModule } from '@swimlane/ngx-charts'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule, NgxChartsModule, BrowserAnimationsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
Step 3 : app.component.html
<ngx-charts-bar-vertical [view]="view" [scheme]="colorScheme" [results]="single" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [barPadding] = 10 (select)="onSelect($event)"> </ngx-charts-bar-vertical>
Step 4 : app.component.ts
import { Component, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { NgxChartsModule } from '@swimlane/ngx-charts'; import { single } from './data'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { single: any[]; multi: any[]; view: any[] = [400, 200]; // options showXAxis = true; showYAxis = true; gradient = false; showLegend = false; showXAxisLabel = false; xAxisLabel = ''; showYAxisLabel = true; yAxisLabel = ''; barPadding = 8; colorScheme = { domain: ['#736eff', '#6EDCFF', '#F7C600', '#77CE7B'], }; constructor() { Object.assign(this, { single }); } onSelect(event) { console.log(event); } }