DEV Community

Dennis Adriaansen
Dennis Adriaansen

Posted on • Edited on

Why I'm Building Angular Charts

React has Tremor; Vue developers have Nuxt Charts, and now, the Angular community finally has a dedicated, modern data visualization library: Angular Charts (angular-chrts).

Hi, I’m Dennis Adriaansen. After seeing the incredible reception and widespread adoption of my previous project, Nuxt Charts, I want to share that same success and developer experience with the Angular community.

Built on a s trong foundation of Unovis and optimized for Angular, Angular Charts is a high-performance, Signals-powered visualization library designed for the modern web.

Why Choose Angular Charts?

  • 🚀 Signals-Powered Reactivity: Built with Angular's modern reactivity model in mind, ensuring fine-grained updates and optimal performance.
  • 🎨 Beautiful by Default: Delivers a polished, production-ready UI instantly, eliminating the need for heavy custom styling.
  • 📊 Versatile Visualization: Comprehensive support for Bar, Line, Area, Donut, Bubble, and Gantt charts to cover all your dashboard needs.
  • 🛠 Native Angular Feel: Features declarative components, OnPush change detection readiness, and CSS-variable driven themes that feel right at home in an Angular codebase.

See the components in action on our official website: angularcharts.com

Quick Start Guide: Implementing Angular Charts

Getting started with Angular Charts is incredibly straightforward. Here is how you can render your first chart in under a minute.

1. Install the Packages

Use your preferred package manager to install the core library alongside its Unovis dependencies:

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

2. Implement in Your Component

Because Angular Charts is built for modern Angular, it fully supports standalone components.

import { Component } from '@angular/core';
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

Join the Angular Charts Community

We’re moving fast to build the ultimate charting standard that the Angular ecosystem deserves. Whether you are building internal admin panels, SaaS dashboards, or public-facing data applications, Angular Charts is designed to accelerate your workflow.

Stay tuned for upcoming feature releases, early access to premium components, and open-source contribution opportunities. Let’s build something beautiful together.

Official Resources & References:

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)