insert_chart Apex Charts
ApexCharts is a modern charting library that
helps developers to create beautiful and
interactive visualizations for web pages. In this template, we use
ng-apexcharts
wrapper for Angular.
info
For more detailed information, please check the Official
ApexCharts Documentation.
Step 1: Installation
Install the required packages via npm:
npm install apexcharts ng-apexcharts --save
Step 2: Import Module
Import NgApexchartsModule in your
app.module.ts or feature module:
import { NgApexchartsModule } from 'ng-apexcharts';
@NgModule({
imports: [
...
NgApexchartsModule
]
})
Step 3: Usage
Add the chart component to your HTML template:
<apx-chart
[series]="chartOptions.series"
[chart]="chartOptions.chart"
[xaxis]="chartOptions.xaxis"
[title]="chartOptions.title"
></apx-chart>
Step 4: Component Configuration
Define the chart options in your component:
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-chart",
templateUrl: "./chart.component.html"
})
export class MyChartComponent {
@ViewChild("chart") chart: ChartComponent;
public chartOptions: Partial<ChartOptions>;
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"]
}
};
}
}