or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

area-charts.mdbar-charts.mdgauge-charts.mdindex.mdline-charts.mdother-charts.mdpie-charts.mdstyling-theming.md
tile.json

tessl/npm-swimlane--ngx-charts

Declarative charting framework for Angular that renders charts using SVG elements through Angular's binding system with extensive chart type support and D3.js integration

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@swimlane/ngx-charts@23.0.x

To install, run

npx @tessl/cli install tessl/npm-swimlane--ngx-charts@23.0.0

index.mddocs/

NGX Charts

NGX Charts is a declarative charting framework for Angular applications that renders charts using SVG elements through Angular's binding system. Built on D3.js, it provides extensive chart type support with full TypeScript integration, server-side rendering compatibility, and real-time data capabilities without wrapping existing chart libraries.

Package Information

  • Package Name: @swimlane/ngx-charts
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @swimlane/ngx-charts

Core Imports

import { NgxChartsModule } from '@swimlane/ngx-charts';
import { 
  BarVerticalComponent, 
  LineChartComponent, 
  PieChartComponent 
} from '@swimlane/ngx-charts';

For individual chart modules:

import { BarChartModule } from '@swimlane/ngx-charts';
import { LineChartModule } from '@swimlane/ngx-charts';
import { PieChartModule } from '@swimlane/ngx-charts';

Basic Usage

Module Setup

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

@NgModule({
  imports: [NgxChartsModule],
  // ... rest of module
})
export class AppModule { }

Simple Bar Chart

import { Component } from '@angular/core';

@Component({
  selector: 'app-chart',
  template: `
    <ngx-charts-bar-vertical
      [results]="data"
      [xAxis]="true"
      [yAxis]="true"
      [legend]="true"
      [showXAxisLabel]="true"
      [showYAxisLabel]="true"
      xAxisLabel="Categories"
      yAxisLabel="Values">
    </ngx-charts-bar-vertical>
  `
})
export class ChartComponent {
  data = [
    { name: 'Category A', value: 30 },
    { name: 'Category B', value: 45 },
    { name: 'Category C', value: 25 }
  ];
}

Architecture

NGX Charts is built around several key components:

  • Chart Components: Specialized chart types (bars, lines, pies, etc.) that handle rendering and interaction
  • Common Infrastructure: Shared axes, legends, tooltips, and utility components
  • Data Models: TypeScript interfaces defining chart data structures and configuration options
  • D3 Integration: Leverages D3.js for mathematical functions, scales, and shape generation
  • Angular Integration: Native Angular components with full change detection and lifecycle support

Capabilities

Bar Charts

Comprehensive bar chart variants including vertical, horizontal, stacked, grouped, and normalized configurations with customizable styling and data labels.

// Main bar chart components
@Component({ selector: 'ngx-charts-bar-vertical' })
export class BarVerticalComponent extends BaseChartComponent {
  @Input() results: SingleSeries;
  @Input() legend: boolean = false;
  @Input() xAxis: boolean;
  @Input() yAxis: boolean;
  @Input() showXAxisLabel: boolean;
  @Input() showYAxisLabel: boolean;
  @Input() xAxisLabel: string;
  @Input() yAxisLabel: string;
  @Input() barPadding: number = 8;
  @Input() roundDomains: boolean = false;
  @Input() trimXAxisTicks: boolean = true;
  @Input() trimYAxisTicks: boolean = true;
  @Input() rotateXAxisTicks: boolean = true;
  @Input() tooltipDisabled: boolean = false;
  @Input() gradient: boolean;
  @Output() activate: EventEmitter<any>;
  @Output() deactivate: EventEmitter<any>;
}

@Component({ selector: 'ngx-charts-bar-horizontal' })
export class BarHorizontalComponent extends BaseChartComponent {
  @Input() results: SingleSeries;
  @Input() legend: boolean = false;
  @Input() xAxis: boolean;
  @Input() yAxis: boolean;
  @Input() trimXAxisTicks: boolean = true;
  @Input() trimYAxisTicks: boolean = true;
  @Output() activate: EventEmitter<any>;
  @Output() deactivate: EventEmitter<any>;
}

Bar Charts

Line Charts

Line chart visualization for trend analysis with curve interpolation, multi-series support, and timeline features.

@Component({ selector: 'ngx-charts-line-chart' })
export class LineChartComponent extends BaseChartComponent {
  @Input() results: MultiSeries;
  @Input() legend: boolean;
  @Input() xAxis: boolean;
  @Input() yAxis: boolean;
  @Input() curve: any = curveLinear;
  @Input() timeline: boolean;
  @Input() showGridLines: boolean = true;
  @Input() referenceLines: any;
  @Input() trimXAxisTicks: boolean = true;
  @Input() trimYAxisTicks: boolean = true;
  @Input() tooltipDisabled: boolean = false;
  @Output() activate: EventEmitter<any>;
  @Output() deactivate: EventEmitter<any>;
}

Line Charts

Area Charts

Area chart components for visualizing cumulative data trends with stacked and normalized variants.

@Component({ selector: 'ngx-charts-area-chart' })
export class AreaChartComponent extends BaseChartComponent {
  @Input() results: MultiSeries;
  @Input() legend: boolean = false;
  @Input() xAxis: boolean = false;
  @Input() yAxis: boolean = false;
  @Input() curve: CurveFactory = curveLinear;
  @Input() gradient: boolean;
  @Input() baseValue: any = 'auto';
  @Input() autoScale: boolean = false;
  @Input() timeline: boolean = false;
  @Input() trimXAxisTicks: boolean = true;
  @Input() trimYAxisTicks: boolean = true;
  @Input() tooltipDisabled: boolean = false;
  @Output() activate: EventEmitter<any>;
  @Output() deactivate: EventEmitter<any>;
}

Area Charts

Pie Charts

Circular chart components for part-to-whole relationships with advanced features and grid layouts.

@Component({ selector: 'ngx-charts-pie-chart' })
export class PieChartComponent {
  @Input() results: SingleSeries;
  @Input() legend: boolean;
  @Input() explodeSlices: boolean;
  @Input() labels: boolean;
  @Input() doughnut: boolean;
  @Input() arcWidth: number;
  @Output() select: EventEmitter<any>;
  @Output() activate: EventEmitter<any>;
  @Output() deactivate: EventEmitter<any>;
}

Pie Charts

Gauge Charts

Gauge components for displaying single values with customizable ranges and styling.

@Component({ selector: 'ngx-charts-gauge' })
export class GaugeComponent {
  @Input() results: SingleSeries;
  @Input() min: number;
  @Input() max: number;
  @Input() units: string;
  @Input() bigSegments: number;
  @Input() smallSegments: number;
  @Input() showAxis: boolean;
  @Input() startAngle: number;
  @Input() angleSpan: number;
  @Output() activate: EventEmitter<any>;
  @Output() deactivate: EventEmitter<any>;
}

Gauge Charts

Other Chart Types

Additional specialized chart types for specific data visualization needs.

// Bubble chart for three-dimensional data
@Component({ selector: 'ngx-charts-bubble-chart' })
export class BubbleChartComponent {
  @Input() results: BubbleChartSeries[];
  @Input() minRadius: number;
  @Input() maxRadius: number;
}

// Heat map for matrix data
@Component({ selector: 'ngx-charts-heat-map' })
export class HeatMapComponent {
  @Input() results: MultiSeries;
  @Input() gradient: boolean;
}

// Tree map for hierarchical data
@Component({ selector: 'ngx-charts-tree-map' })
export class TreeMapComponent {
  @Input() results: TreeMapDataItem[];
}

// Number cards for KPI display
@Component({ selector: 'ngx-charts-number-card' })
export class NumberCardComponent {
  @Input() results: SingleSeries;
  @Input() cardColor: string;
  @Input() textColor: string;
}

// Box charts for statistical data
@Component({ selector: 'ngx-charts-box-chart' })
export class BoxChartComponent extends BaseChartComponent {
  @Input() results: BoxChartMultiSeries;
  @Input() legend: boolean = false;
  @Input() strokeColor: string = '#FFFFFF';
  @Input() strokeWidth: number = 2;
  @Input() roundEdges: boolean = true;
  @Input() tooltipDisabled: boolean = false;
}

// Polar charts for multivariate data
@Component({ selector: 'ngx-charts-polar-chart' })
export class PolarChartComponent {
  @Input() results: MultiSeries;
  @Input() legend: boolean;
  @Input() curve: CurveFactory;
}

// Sankey diagrams for flow visualization
@Component({ selector: 'ngx-charts-sankey' })
export class SankeyComponent {
  @Input() results: SankeyData;
  @Input() nodeWidth: number;
  @Input() nodePadding: number;
}

Other Chart Types

Data Models

// Core data interfaces
interface DataItem {
  name: StringOrNumberOrDate;
  value: number;
  extra?: any;
  min?: number;
  max?: number;
  label?: string;
}

interface Series {
  name: StringOrNumberOrDate;
  series: DataItem[];
}

// Chart data types
type SingleSeries = DataItem[];
type MultiSeries = Series[];
type StringOrNumberOrDate = string | number | Date;

// Bubble chart specific
interface BubbleChartDataItem {
  name: StringOrNumberOrDate;
  x: StringOrNumberOrDate;
  y: StringOrNumberOrDate;
  r: number;
  extra?: any;
}

interface BubbleChartSeries {
  name: StringOrNumberOrDate;
  series: BubbleChartDataItem[];
}

// Tree map specific  
interface TreeMapDataItem {
  name: StringOrNumberOrDate;
  size?: number;
  children?: TreeMapDataItem[];
  extra?: any;
}

// Box chart specific
interface IBoxModel {
  name: StringOrNumberOrDate;
  value: number;
  q1: number;
  q3: number;
  median: number;
  whiskers: [number, number];
  outliers: number[];
}

interface BoxChartSeries {
  name: StringOrNumberOrDate;
  series: IBoxModel[];
}

// Sankey diagram specific
interface SankeyData {
  nodes: Array<{ id: string; label?: string }>;
  links: Array<{
    source: string;
    target: string;
    value: number;
  }>;
}

Base Chart Component

All chart components extend the BaseChartComponent which provides common functionality and inputs:

@Component({ selector: 'base-chart' })
export class BaseChartComponent implements OnChanges, AfterViewInit, OnDestroy, OnInit {
  @Input() results: any;
  @Input() view: [number, number];
  @Input() scheme: string | Color = 'cool';
  @Input() schemeType: ScaleType = ScaleType.Ordinal;
  @Input() customColors: any;
  @Input() animations: boolean = true;
  
  @Output() select = new EventEmitter();
  
  width: number;
  height: number;
}

This base component handles:

  • Automatic resizing and responsive behavior
  • Data cloning and change detection
  • Common chart properties (view, scheme, animations)
  • Date formatting utilities
  • Visibility detection for performance optimization

Common Configuration

// Scale types for different data types
enum ScaleType {
  Time = 'time',
  Linear = 'linear',
  Ordinal = 'ordinal',
  Quantile = 'quantile'
}

// Legend configuration
enum LegendPosition {
  Right = 'right',
  Below = 'below'
}

// View dimensions interface
interface ViewDimensions {
  width: number;
  height: number;
  xOffset?: number;
  yOffset?: number;
}

// Color scheme interface
interface Color {
  name: string;
  selectable: boolean;
  group: ScaleType;
  domain: string[];
}

Styling & Theming

NGX Charts provides extensive CSS-based customization through CSS variables and class-based styling. All chart elements can be styled using standard CSS approaches while maintaining SVG-based rendering performance.

Styling & Theming