Skip to content
GlitchTip Open source error tracking for your Angular apps

@glitchtip/ng-charts

SVG charts for Angular, powered by D3.

A charting library that renders real SVG elements in the DOM. Charts are native browser content you can inspect, select, copy, and style with CSS. No canvas, no black boxes.

Built on D3 for scales and layout, Angular for rendering.

When to use this

This library is a good fit when you need straightforward charts -- bars, lines, areas, pies, gauges -- without a heavy setup. Because everything is SVG, charts participate naturally in the browser: they're accessible, styleable, printable, and easy to debug in dev tools.

It is not the right choice for visualizing thousands of data points or building complex interactive dashboards. Canvas-based libraries handle that better. If your dataset fits comfortably on screen, SVG is a simpler foundation.

What's included

  • Bar charts -- vertical, horizontal, grouped, stacked, normalized
  • Line & area charts -- with stacked and normalized variants
  • Pie & donut charts -- standard, advanced with legend, pie grid
  • Gauges -- radial and linear
  • Heat maps, tree maps, bubble charts, number cards, sankey diagrams, polar charts, box plots
  • Building blocks -- axes, legends, tooltips, and shapes for custom charts

Modern Angular

This is a fork of @swimlane/ngx-charts, updated for current Angular:

  • Standalone components -- no NgModules, import only what you use
  • Signal inputs -- modern reactive patterns
  • Zoneless compatible -- works with provideExperimentalZonelessChangeDetection()
  • CSP compliant -- no inline styles
  • Tree-shakeable -- sideEffects: false
  • No Angular Animations dependency -- transitions use CSS and D3

Quick start

npm install @glitchtip/ng-charts

import { BarVerticalComponent } from '@glitchtip/ng-charts';

@Component({
  imports: [BarVerticalComponent],
  template: `
    <ng-charts-bar-vertical
      [results]="data"
      [xAxis]="true"
      [yAxis]="true">
    </ng-charts-bar-vertical>
  `
})
export class MyComponent {
  data = [
    { name: 'Germany', value: 40 },
    { name: 'USA', value: 49 },
    { name: 'France', value: 36 }
  ];
}

See the Getting Started guide for more.

About this fork

Originally created by Swimlane, who built and maintained ngx-charts for the Angular community for many years. We're grateful for their work.

We forked because the upstream project had slowed down and we needed fixes for GlitchTip, our open source error tracking platform. The main drivers were CSP compliance, modern Angular support, and keeping up with Angular releases.

The API is compatible with @swimlane/ngx-charts@23.x. If you're migrating, see the migration guide.

Maintenance

Maintained by the GlitchTip team. We keep it current with Angular releases but aren't adding new chart types. Bug fixes and compatibility PRs are welcome.

Built by the GlitchTip team.