Build beautiful, interactive data visualizations for your Angular applications. Whether you're creating dashboards, analytics platforms, or data-driven applications, Angular Charts provides the tools you need to present complex data in clear, engaging ways.
Angular Charts is designed from the ground up for the Angular ecosystem, providing seamless integration with Angular's component architecture and reactive programming patterns.
Angular Charts provides a comprehensive set of chart types to visualize any kind of data:
Perfect for showing trends over time with filled areas that emphasize volume and magnitude. Ideal for revenue tracking, user growth, and performance metrics.
Excellent for comparing values across categories. Use vertical or horizontal orientations, stacked or grouped layouts to highlight differences and rankings.
The classic choice for time series data. Display single or multiple data series with smooth curves or stepped transitions.
Show part-to-whole relationships with elegant donut and pie charts. Perfect for displaying proportions, distributions, and market share data.
Integrating Angular Charts into your Angular project is straightforward. Follow these steps to add beautiful data visualizations to your application.
Install Angular Charts using your preferred package manager:
npm install angular-charts
yarn add angular-charts
pnpm add angular-charts
Import the Angular chart modules into your Angular module or standalone component:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AreaChartModule, BarChartModule, LineChartModule } from 'angular-charts';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AreaChartModule,
BarChartModule,
LineChartModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
Here's a simple example of an area chart in Angular:
import { Component } from '@angular/core';
interface ChartData {
date: string;
desktop: number;
mobile: number;
}
@Component({
selector: 'app-analytics',
template: `
<area-chart
[data]="chartData"
[height]="300"
[categories]="categories"
[yGridLine]="true"
[xFormatter]="xFormatter"
curveType="monotoneX"
legendPosition="topRight">
</area-chart>
`
})
export class AnalyticsComponent {
chartData: ChartData[] = [
{ date: '2024-04-01', desktop: 222, mobile: 150 },
{ date: '2024-04-02', desktop: 180, mobile: 97 },
{ date: '2024-04-03', desktop: 167, mobile: 120 },
{ date: '2024-04-04', desktop: 260, mobile: 240 },
{ date: '2024-04-05', desktop: 240, mobile: 290 },
];
categories = {
desktop: { name: 'Desktop', color: '#3b82f6' },
mobile: { name: 'Mobile', color: '#22c55e' }
};
xFormatter = (tick: number): string => {
const date = new Date(this.chartData[tick]?.date);
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
};
}
Angular Charts integrates seamlessly with RxJS for real-time data streaming:
import { Component, OnInit } from '@angular/core';
import { Observable, interval } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
@Component({
selector: 'app-live-dashboard',
template: `
<line-chart
[data]="liveData$ | async"
[height]="300"
[categories]="categories"
[animated]="true">
</line-chart>
`
})
export class LiveDashboardComponent implements OnInit {
liveData$: Observable<any[]>;
categories = {
value: { name: 'Real-time Value', color: '#8b5cf6' }
};
ngOnInit() {
this.liveData$ = interval(1000).pipe(
startWith(0),
map(() => this.generateDataPoint())
);
}
private generateDataPoint() {
// Generate real-time data
return { timestamp: new Date(), value: Math.random() * 100 };
}
}
Match your charts to your application's design system with comprehensive theming options:
export const customChartTheme = {
colors: {
primary: '#3b82f6',
secondary: '#10b981',
accent: '#f59e0b',
neutral: '#6b7280'
},
tooltip: {
backgroundColor: '#1f2937',
textColor: '#ffffff',
borderRadius: '8px'
},
legend: {
position: 'bottom',
alignment: 'center'
},
grid: {
strokeColor: 'rgba(107, 114, 128, 0.2)',
strokeWidth: 1
}
};
Provide rich contextual information with customizable tooltips:
@Component({
selector: 'app-tooltip-example',
template: `
<bar-chart
[data]="salesData"
[height]="300"
[categories]="categories"
[tooltipTemplate]="customTooltip">
</bar-chart>
<ng-template #customTooltip let-data>
<div class="custom-tooltip">
<h4>{{ data.category }}</h4>
<p>Value: {{ data.value | number }}</p>
<p>Growth: {{ data.growth }}%</p>
</div>
</ng-template>
`
})
export class TooltipExampleComponent {
// Component implementation
}
When working with large datasets, consider these performance optimizations:
ChangeDetectionStrategy.OnPush for chart components.Make your charts accessible to all users:
aria-label attributes for chart containers.Create charts that work on all devices:
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'app-responsive-chart',
template: `
<area-chart
[data]="data"
[height]="chartHeight"
[categories]="categories">
</area-chart>
`
})
export class ResponsiveChartComponent {
chartHeight = 300;
@HostListener('window:resize')
onResize() {
this.chartHeight = window.innerWidth < 768 ? 200 : 300;
}
}
Support international users with proper formatting:
import { Component, LOCALE_ID, Inject } from '@angular/core';
import { formatNumber, formatDate } from '@angular/common';
@Component({
selector: 'app-localized-chart',
template: `
<line-chart
[data]="data"
[height]="300"
[categories]="categories"
[yFormatter]="currencyFormatter"
[xFormatter]="dateFormatter">
</line-chart>
`
})
export class LocalizedChartComponent {
constructor(@Inject(LOCALE_ID) private locale: string) {}
currencyFormatter = (value: number): string => {
return formatNumber(value, this.locale, '1.0-2');
};
dateFormatter = (tick: number): string => {
return formatDate(this.data[tick].date, 'MMM d', this.locale);
};
}
Build comprehensive analytics dashboards showing user engagement, conversion rates, and revenue metrics. Angular Charts' reactive nature makes it perfect for displaying real-time SaaS metrics.
Create financial dashboards with stock charts, portfolio performance tracking, and market analysis visualizations. Support for multiple data series and time-based axes makes financial data visualization intuitive.
Display sensor data, system metrics, and monitoring dashboards with real-time updates. Integration with WebSockets and RxJS enables smooth streaming data visualization.
Visualize sales trends, inventory levels, customer behavior, and marketing performance. Bar charts and area charts help identify patterns and opportunities.
Ready to start building beautiful data visualizations for your Angular applications? Explore our comprehensive documentation:
Start creating stunning Angular charts today and transform how your users interact with data.
Everything you need to know about our templates