@swimlane/ngx-charts

Declarative, D3-powered charting library for Angular — SVG charts as Angular components with animations and responsive support.

@swimlane/ngx-charts

Angular

Declarative, D3-powered charting library for Angular — SVG charts as Angular components with animations and responsive support.

npm GitHub Docs

Fit

Bundle (gzip)

112.2 kB

802.3 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Integrating raw D3 with Angular conflicts with Angular's zone-based change detection and requires imperative DOM manipulation that bypasses the component model.

What It Does

ngx-charts wraps D3 calculations in Angular components, so charts update reactively when your data changes. It provides bar, line, area, pie, bubble, heat map, and gauge charts — all fully declarative, animated, and responsive out of the box.

Installation

bash

npm install @swimlane/ngx-charts

Usage Example

typescript

import { NgxChartsModule } from '@swimlane/ngx-charts';

@NgModule({ imports: [NgxChartsModule] })
export class AppModule {}

html

<ngx-charts-bar-vertical
  [results]="salesData"
  [xAxisLabel]="'Month'"
  [yAxisLabel]="'Revenue'"
  [showXAxisLabel]="true"
  [showYAxisLabel]="true"
  [animations]="true">
</ngx-charts-bar-vertical>

Related packages

@angular/cdkAngular

Angular Component Dev Kit — a set of behavior primitives for building accessible, high-quality UI components without prescribing any visual style.

@angular/materialAngular

Official Material Design component library for Angular — 30+ accessible, themeable UI components built for Angular's ecosystem.

@ng-bootstrap/ng-bootstrapAngular

Angular widgets built from scratch using Bootstrap CSS — no jQuery, no Popper.js, just pure Angular components.

ng-zorro-antdAngular

Enterprise-grade UI component library for Angular based on Ant Design — 60+ production-ready components with a polished design system.

@ngneat/until-destroyAngular

Automatic RxJS subscription cleanup for Angular components — no more manual unsubscribe logic in ngOnDestroy.