✨ Try our new interactive demo
ApexCharts offers a great level of interactivity out-of-the-box. It is highly customizable, with responsive design built-in. Additionally, it can work across most javascript libraries without additional work required. It is a newer library and may have a steeper learning curve than other library offerings.
Angular is a popular open-source framework developed by Google for building dynamic web applications. It's part of a broader ecosystem that includes tools and libraries designed to work together to enable efficient development of high-quality applications. Angular is known for its robustness, scalability, and ability to create single-page applications (SPAs) that offer a smooth, native-like user experience. Angular has a component-based architecture, enabling great modularity. Additionally, it is great at syncing data between a view and a model. It can have a steep learning curve, but has a great community and high performance.
To integrate ApexCharts with Angular, ensure you have Angular CLI installed on your system. This example will guide you through creating a basic line chart using ApexCharts within an Angular project. If you haven't already set up an Angular project, you can create one by running ng new my-apexchart-app in your terminal.
Navigate to your Angular project directory in the terminal and run the following commands:
npm install apexcharts --save
npm install ng-apexcharts --save
Open the app.module.ts file and import NgApexchartsModule from ng-apexcharts. Add NgApexchartsModule to the imports array of your NgModule:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgApexchartsModule } from 'ng-apexcharts';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgApexchartsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
In your Angular application, you may now create a component that will render the ApexChart. Here's how to generate a new component named chart:
ng generate component chart
In your chart.component.ts, first import ApexOptions from ng-apexcharts to define the type of your chart options. Then, define your chart's options like series, chart type, title, etc., as shown below:
import { Component } from '@angular/core';
import { ApexOptions } from 'ng-apexcharts';
@Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.css']
})
export class ChartComponent {
public chartOptions: ApexOptions;
constructor() {
this.chartOptions = {
series: [
{
name: "Sample Series",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}
],
chart: {
height: 350,
type: "line"
},
title: {
text: "My First Angular Chart"
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"]
}
};
}
}
Modify the chart.component.html file to include the apx-chart tag, which renders the chart. Set its [series], [chart], [xaxis], and [title] inputs to the chartOptions you defined:
<div>
<apx-chart
[series]="chartOptions.series"
[chart]="chartOptions.chart"
[title]="chartOptions.title"
[xaxis]="chartOptions.xaxis">
</apx-chart>
</div>
Now, when you serve your Angular application using ng serve, you should see a beautiful line chart rendered on the page, based on the data and configuration you provided in your Angular component.
This is a basic example to get you started with ApexCharts in Angular. ApexCharts offer a wide range of chart types and options for customization, so be sure to explore the library's documentation for more advanced features and capabilities.
Looking for the fastest, easiest way to make responsive next-level charts on your website? Reach out to Explo, the market leader in creating responsive charts. With Explo's Report Builder and Editable Sections offerings, you can easily drag-and-drop charts and custom reporting in a matter of minutes, all with just SQL and no-code tools. No need to learn and configure charts, use our highly customizable solution instead.
