To use angular-advance-chart in your project install it via npm:
npm i angular-advance-chart
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularAdvanceChartModule } from 'angular-advance-chart';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AngularAdvanceChartModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
@import "~angular-advance-chart/styles.css";
chartData: ChartData[] = [
{ name: "India", value: 132, color: "#61b15a" },
{ name: "Nepal", value: 772, color: "#adce74" },
{ name: "USA", value: 142, color: "#fff76a" },
{ name: "UK", value: 112, color: "#ffce89" },
{ name: "Brazil", value: 162, color: "#d8f8b7" }
];
chartOptions: BarChartOption = {
roundedCorners: false,
showLegend: true,
legendTitle: 'Total',
isHorizontal: false
}
barView: ChartView = {
height: 400,
width: 400
}
<ngx-bar-chart [chartData]='chartData' [chartOptions]='chartOptions' [view]='barView' ></ngx-bar-chart>
chartData: ChartData[] = [
{ name: "India", value: 132, color: "#61b15a" },
{ name: "Nepal", value: 772, color: "#adce74" },
{ name: "USA", value: 142, color: "#fff76a" },
{ name: "UK", value: 112, color: "#ffce89" },
{ name: "Brazil", value: 162, color: "#d8f8b7" }
];
pieView: PieChartView= {
height:400,
width:400,
radius:160
}
chartOptions: ChartOption = {
showLegend: true,
legendTitle: 'Total'
}
<ngx-pie-chart [chartData]='chartData' [view]='pieView' [chartOptions]='chartOptions'></ngx-pie-chart>
.ngx-pie .chart-wrapper path:hover {
cursor: pointer;
transform-origin: center;
transform: scale(1.05);
}
chartData: ChartData[] = [
{ name: "India", value: 132, color: "#61b15a" },
{ name: "Nepal", value: 772, color: "#adce74" },
{ name: "USA", value: 142, color: "#fff76a" },
{ name: "UK", value: 112, color: "#ffce89" },
{ name: "Brazil", value: 162, color: "#d8f8b7" }
];
donutView: DonutChartView = {
height: 400,
width: 400,
radius: 160,
donutSize:40
}
chartOptions: ChartOption = {
showLegend: true,
legendTitle: 'Total'
}
<ngx-donut-chart [chartData]="chartData" [chartOptions]='chartOptions' [view]='donutView'></ngx-donut-chart>
.ngx-donut .chart-wrapper path:hover {
cursor: pointer;
stroke-width: 55px;
}