ng-charts

A reangular port of recharts.

Built with idiomatic modern Angular (Signals, Zoneless, Standalone Components/Directives)

Installation

npm install @aleksanderbodurri/ng-charts @ngrx/signals @angular/cdk

The package expects Angular 19 or newer. Angular apps already include @angular/core and @angular/common; install @ngrx/signals and @angular/cdk alongside ng-charts.

Quickstart

import { Component } from '@angular/core';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from '@aleksanderbodurri/ng-charts';

const data = [
  { name: 'Jan', uv: 400, pv: 240 },
  { name: 'Feb', uv: 300, pv: 139 },
  { name: 'Mar', uv: 600, pv: 380 },
  { name: 'Apr', uv: 800, pv: 430 },
  { name: 'May', uv: 500, pv: 250 },
];

@Component({
  selector: 'app-my-line-chart',
  imports: [LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend],
  template: `
    <ngc-line-chart [data]="data" [width]="640" [height]="320">
      <svg:g ngc-cartesian-grid strokeDasharray="3 3" />
      <svg:g ngc-x-axis dataKey="name" />
      <svg:g ngc-y-axis />
      <svg:g ngc-tooltip />
      <svg:g ngc-legend />
      <svg:g ngc-line dataKey="uv" stroke="#8884d8" [strokeWidth]="2" />
      <svg:g ngc-line dataKey="pv" stroke="#82ca9d" [strokeWidth]="2" />
    </ngc-line-chart>
  `
})
export class MyLineChartComponent {
  protected readonly data = data;
}

Origin

This library is a reangular port of recharts, the composable charting library built on React components. ng-charts mirrors recharts' public API (charts, cartesian/polar graphical items, components, shapes, hooks, and utilities) in idiomatic modern Angular.

Built with reangular

This library was generated using the reangular skill, which is an automated React-to-Angular conversion harness for coding agents.

State management

recharts v3 is built on a Redux Toolkit store. This port migrates that state layer to @ngrx/signals: each recharts slice becomes a signalStore, each reselect selector becomes a computed signal, and the redux middlewares become store methods / effects.

Development

npm install
npx ng build ng-charts   # build the library
npx ng serve demo        # run the interactive demo at http://localhost:4200

Original contributors

All credit for the original design and implementation belongs to the recharts team and its contributors. The recharts checkout used for this port is a shallow clone (truncated git history), so this list was fetched from the GitHub contributors API (see the full contributor list for everyone involved):

xile611, PavelVanecek, ckifer, arcthur, sainthkh, proke03, Yilun-Sun, huxiaoyun, HHongSeungWoo, evilucifero, jasonHzq, billneff79, techniq, avindra, akamfoad, marcalexiei, julianna-langston, cloud-walker, paulmelnikow, kamthamc, nikolasrieble, andrewangelle, imagineLife, jochenberger, and many more.

License

MIT, which is the same as the upstream recharts project. ng-charts is a derivative work of recharts; the upstream LICENSE (MIT, © Recharts Group) is preserved.