apexcharts
Install
npm install apexcharts ng-apexcharts --save
Include js library
Include apex chart js file in angular.json file like this:
"scripts": [
"node_modules/apexcharts/dist/apexcharts.min.js"
]
Import Modules
Add ng-apexcharts-module to imports
import { NgApexchartsModule } from 'ng-apexcharts';
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
NgApexchartsModule,
...
]
Apex Chart Components
ApexchartComponent
class in apexchart.component.ts
would
look like this
import { Component, ViewChild } from "@angular/core";
import {
ChartComponent,
ApexAxisChartSeries,
ApexChart,
ApexXAxis,
ApexTitleSubtitle
} from "ng-apexcharts";
export type ChartOptions = {
series: ApexAxisChartSeries;
chart: ApexChart;
xaxis: ApexXAxis;
title: ApexTitleSubtitle;
};
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
@ViewChild("chart") chart: ChartComponent;
public chartOptions: Partial;
constructor() {
this.chartOptions = {
series: [
{
name: "My-series",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}
],
chart: {
height: 350,
type: "bar"
},
title: {
text: "My First Angular Chart"
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"]
}
};
}
}
Apex chart Markup
apexchart.component.html
would look like this
<div style="text-align:center">
<apx-chart
[series]="chartOptions.series"
[chart]="chartOptions.chart"
[xaxis]="chartOptions.xaxis"
[title]="chartOptions.title"
> </apx-chart>
</div>
Referral Url
Type | URL |
---|---|
apex chart | https://apexcharts.com/docs/angular-charts/ |