CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-ng2-charts

Reactive, responsive, beautiful charts for Angular based on Chart.js

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

ng2-charts

ng2-charts is a reactive, responsive Angular library that provides beautiful chart components based on Chart.js. It offers a single directive that supports 8 different chart types (line, bar, radar, pie, polar area, doughnut, bubble, and scatter) with dynamic theming capabilities, event handling, and flexible data binding options.

Package Information

  • Package Name: ng2-charts
  • Package Type: npm
  • Language: TypeScript
  • Installation: ng add ng2-charts or npm install ng2-charts
  • Peer Dependencies: Angular 19.0.0+, Chart.js ^3.4.0 || ^4.0.0, RxJS ^6.5.3 || ^7.4.0

Core Imports

import { BaseChartDirective, ThemeService, provideCharts, withDefaultRegisterables, NgChartsConfiguration, NG_CHARTS_CONFIGURATION } from "ng2-charts";
import { ChartConfiguration, ChartData, ChartOptions, ChartType, ChartEvent, Plugin, UpdateMode } from "chart.js";

For CommonJS (if supported):

const { BaseChartDirective, ThemeService, provideCharts, withDefaultRegisterables } = require("ng2-charts");
const { ChartConfiguration, ChartData, ChartOptions } = require("chart.js");

Basic Usage

import { Component } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts';
import { ChartData, ChartOptions, ChartType } from 'chart.js';

@Component({
  selector: 'app-chart',
  template: `
    <canvas 
      baseChart
      [data]="chartData"
      [options]="chartOptions"
      [type]="chartType"
      (chartClick)="onChartClick($event)"
      (chartHover)="onChartHover($event)">
    </canvas>
  `,
  standalone: true,
  imports: [BaseChartDirective]
})
export class ChartComponent {
  chartType: ChartType = 'bar';
  
  chartData: ChartData = {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 205, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ]
    }]
  };

  chartOptions: ChartOptions = {
    responsive: true,
    plugins: {
      legend: {
        display: true
      }
    }
  };

  onChartClick(event: any) {
    console.log('Chart clicked:', event);
  }

  onChartHover(event: any) {
    console.log('Chart hovered:', event);
  }
}

Architecture

ng2-charts is built around several key components:

  • BaseChartDirective: The main directive that wraps Chart.js functionality for Angular
  • Configuration System: Provider-based configuration using provideCharts and withDefaultRegisterables
  • Theme Service: Dynamic theming system for runtime color scheme changes
  • Event System: Angular-style event emitters for chart interactions
  • Type Safety: Full TypeScript integration with Chart.js types

Capabilities

Chart Directive

The main BaseChartDirective provides the core charting functionality with support for 8 chart types, reactive data binding, and Angular lifecycle integration.

@Directive({
  selector: 'canvas[baseChart]',
  exportAs: 'base-chart',
  standalone: true
})
export class BaseChartDirective<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> implements OnDestroy, OnChanges {
  @Input() type: ChartConfiguration<TType, TData, TLabel>['type'];
  @Input() legend?: boolean;
  @Input() data?: ChartConfiguration<TType, TData, TLabel>['data'];
  @Input() options: ChartConfiguration<TType, TData, TLabel>['options'];
  @Input() plugins: Plugin<TType>[];
  @Input() labels?: ChartConfiguration<TType, TData, TLabel>['data']['labels'];
  @Input() datasets?: ChartConfiguration<TType, TData, TLabel>['data']['datasets'];
  
  @Output() chartClick: EventEmitter<{event?: ChartEvent; active?: object[]}>;
  @Output() chartHover: EventEmitter<{event: ChartEvent; active: object[]}>;
  
  ctx: string;
  chart?: Chart<TType, TData, TLabel>;
  
  constructor(element: ElementRef, zone: NgZone, themeService: ThemeService, config?: NgChartsConfiguration);
  
  ngOnChanges(changes: SimpleChanges): void;
  ngOnDestroy(): void;
  render(): Chart<TType, TData, TLabel>;
  update(mode?: UpdateMode): void;
  hideDataset(index: number, hidden: boolean): void;
  isDatasetHidden(index: number): boolean | undefined;
  toBase64Image(): string | undefined;
}

Chart Directive

Configuration System

Provider-based configuration system for registering Chart.js components and setting default options. Essential for proper Chart.js integration and bundle optimization.

function provideCharts(...configurations: readonly NgChartsConfiguration[]): Provider;

function withDefaultRegisterables(...registerables: ChartComponentLike[]): NgChartsConfiguration;

interface NgChartsConfiguration {
  registerables?: readonly ChartComponentLike[];
  defaults?: DeepPartial<Defaults>;
}

Configuration

Dynamic Theming

Theme service for runtime color scheme changes and dynamic chart styling. Allows applications to update chart appearance based on user preferences or application state.

@Injectable({
  providedIn: 'root'
})
export class ThemeService {
  colorschemesOptions: BehaviorSubject<ChartOptions | undefined>;
  
  setColorschemesOptions(options: ChartConfiguration['options']): void;
  getColorschemesOptions(): ChartConfiguration['options'];
}

Dynamic Theming

Types

Chart.js Types

These types are imported from Chart.js:

type ChartType = 'line' | 'bar' | 'radar' | 'pie' | 'polarArea' | 'doughnut' | 'bubble' | 'scatter';
type UpdateMode = 'resize' | 'reset' | 'none' | 'hide' | 'show' | 'normal' | 'active';
type DefaultDataPoint<TType extends ChartType> = TType extends 'line' ? number | Point : TType extends 'bar' ? number : TType extends 'bubble' ? BubbleDataPoint : number;

interface ChartConfiguration<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> {
  type: TType;
  data: ChartData<TType, TData, TLabel>;
  options?: ChartOptions<TType>;
  plugins?: Plugin<TType>[];
}

interface ChartData<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> {
  labels?: TLabel[];
  datasets: ChartDataset<TType, TData>[];
}

interface Plugin<TType extends ChartType = ChartType> {
  id: string;
  [key: string]: any;
}

interface ChartComponentLike {
  id: string;
  [key: string]: any;
}

type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};

interface Defaults {
  [key: string]: any;
}

Event Types

interface ChartEvent {
  type: string;
  native: Event | null;
  x: number | null;
  y: number | null;
}

ng2-charts Configuration Types

interface NgChartsConfiguration {
  registerables?: readonly ChartComponentLike[];
  defaults?: DeepPartial<Defaults>;
}

const NG_CHARTS_CONFIGURATION: InjectionToken<NgChartsConfiguration>;
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/ng2-charts@8.0.x
Publish Source
CLI
Badge
tessl/npm-ng2-charts badge