DEV Community

Dennis Adriaansen
Dennis Adriaansen

Posted on

Why I'm Building Angular Charts

React has Tremor; Nuxt has Nuxt Charts and now Angular has Angular Charts (angular-chrts). It’s a high-performance, Signals-powered visualization library built on Unovis and optimized for Angular Material.

Why Angular Charts?

  • 🚀 Signals-Powered: Fine-grained reactivity for modern Angular.
  • 🎨 Beautiful by Default: Polished, production-ready UI out of the box.
  • 📊 Versatile: Support for Bar, Line, Area, Donut, Bubble, and Gantt charts.
  • 🛠 Native Feel: Declarative components, OnPush ready, and CSS-variable driven.

Take a look at: https://angularcharts.com/

Quick Start

1. Install

pnpm add angular-chrts @unovis/angular @unovis/ts
Enter fullscreen mode Exit fullscreen mode

2. Implement

import { BarChartComponent } from 'angular-chrts';

@Component({
  standalone: true,
  imports: [BarChartComponent],
  template: `
    <ngx-bar-chart 
      [data]="chartData" 
      [categories]="categories" 
      xLabel="Month" 
      yLabel="Revenue ($)" 
    />`
})
export class AppComponent {
  chartData = [{ month: 'Jan', revenue: 4500 }, { month: 'Feb', revenue: 5200 }];
  categories = { revenue: { label: 'Revenue', color: '#3b82f6' } };
}
Enter fullscreen mode Exit fullscreen mode

The Origin

While building Angular Dashboards, I found existing libraries either felt like dated ports or just not austhethic at all. Angular Charts is made for native experience that makes Angular dashboard applications look beautifull out of the box.

Angular Charts exists because I needed it—and it turns out, so did the community. If you’ve ever envied React’s charting ecosystem, this is for you.

We’re moving fast. Stay tuned for updates, early access, and contribution opportunities. Let’s build the charting standard Angular deserves, together.

Resources: Website | Documentation

Top comments (0)