https://github.com/dennisadriaans/angular-chrts
https://github.com/dennisadriaans/angular-chrts
Last synced: 7 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/dennisadriaans/angular-chrts
- Owner: dennisadriaans
- Created: 2026-01-26T19:09:26.000Z (17 days ago)
- Default Branch: main
- Last Pushed: 2026-02-05T06:13:12.000Z (8 days ago)
- Last Synced: 2026-02-05T18:39:52.435Z (7 days ago)
- Language: TypeScript
- Size: 801 KB
- Stars: 14
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-angular - angular-chrts - A high-performance, developer-friendly data visualization library for modern Angular applications. (Third Party Components / Charts)
- awesome-angular - angular-chrts - A high-performance, developer-friendly data visualization library for modern Angular applications. (Third Party Components / Charts)
README
# Angular Charts (`angular-chrts`)
[](https://www.npmjs.com/package/angular-chrts)
[](https://opensource.org/licenses/MIT)
**Angular Charts** is a high-performance, developer-friendly data visualization library for modern Angular applications. Based on [Unovis](https://unovis.dev/), it provides a suite of pre-built, Signals-powered components that make creating beautiful, responsive charts effortless.
## 📖 Resources
- [**Website**](https://nuxtcharts.com/)
- [**Documentation**](https://nuxtcharts.com/docs)
## Why Choose Angular Charts?
- 🚀 **Performance First**: Built with Angular Signals for efficient, fine-grained reactivity.
- 🎨 **Beautiful by Default**: Clean, modern design with easy customization via CSS variables.
- 📦 **Declarative API**: Easy-to-use components that feel native to Angular.
- 📊 **Versatile Data Visualization**: Support for Bar, Line, Area, Donut, Bubble, and Gantt charts.
- 🛠**Powered by Unovis**: Leverages the power of the battle-tested Unovis visualization framework for robust Angular charts.
## Installation
Install the package via npm or pnpm:
```bash
# Using npm
npm install angular-chrts @unovis/angular @unovis/ts
# Using pnpm
pnpm add angular-chrts @unovis/angular @unovis/ts
```
## Quick Start: Build your first Angular Chart
Simply import the chart component you need and start visualizing your data.
### 📊 Bar Chart Example
```typescript
import { Component } from '@angular/core';
import { BarChartComponent } from 'angular-chrts';
@Component({
selector: 'app-root',
standalone: true,
imports: [BarChartComponent],
template: `
`
})
export class AppComponent {
chartData = [
{ month: 'Jan', revenue: 4500 },
{ month: 'Feb', revenue: 5200 },
{ month: 'Mar', revenue: 4800 },
];
categories = {
revenue: {
label: 'Monthly Revenue',
color: '#3b82f6'
}
};
}
```
## Supported Chart Types
| Chart Type | Key Features |
| :--- | :--- |
| **Line Chart** | Smooth curves, markers, multi-category support. |
| **Bar Chart** | Grouped or stacked bars, horizontal/vertical orientation. |
| **Area Chart** | Stacked or overlay areas, custom gradients. |
| **Donut Chart** | Highly customizable central labels, legend integration. |
| **Bubble Chart** | 3D data visualization with customizable point sizing. |
| **Gantt Chart** | Specialized timeline visualization for project management. |
## Customization & Styling
Angular Charts icons support extensive styling through inputs and global CSS variables. You can easily control:
- Colors and Gradients
- Axis formatting and labels
- Tooltip content and styling
- Legend positioning (Top, Bottom, Left, Right)
-
## Development
If you want to contribute or build the project locally:
```bash
# Install dependencies
pnpm install
# Start the example app
ng serve
# Build the library
ng build lib
```
## Support
## License
MIT © [Dennis Adriaansen](https://github.com/dennisadriaansen)