Thursday, January 9, 2020

Angular 8+ with ngx-charts

app.component.html
----------------------------------------------
<div style="display: inline-block">
<ngx-charts-area-chart
[view]="view"
[scheme]="colorScheme"
[results]="multi"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[autoScale]="autoScale"
(select)="onSelect($event)">
</ngx-charts-area-chart>
</div>

app.component.ts
----------------------------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {

public multi = [
{
"name": "India",
"series": [
{
"name": "2009",
"value": 7500000
},
{
"name": "2010",
"value": 8948000
}
]
},

{
"name": "USA",
"series": [
{
"name": "2009",
"value": 7874000
},
{
"name": "2010",
"value": 8276000
}
]
},
{
"name": "Singapur",
"series": [
{
"name": "2009",
"value": 5004002
},
{
"name": "2010",
"value": 5804000
}
]
}
];
view: any[] = [700, 400];
showXAxis = true;
showYAxis = true;
gradient = false;
showLegend = true;
showXAxisLabel = true;
xAxisLabel = 'Number';
showYAxisLabel = true;
yAxisLabel = 'data';
timeline = true;
colorScheme = {
domain: ['#E91E63', '#CDDC39', '#3F51B5', '#AAAAAA']
};}

app.module.ts
-----------------------------------------------------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxChartsModule } from "@swimlane/ngx-charts";
import { AppComponent } from './app.component';

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