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

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Configuration System

Name: tessl/npm-ng2-charts
Author: tessl

ng2-charts provides a provider-based configuration system for registering Chart.js components and setting global defaults. This system is essential for proper Chart.js integration and enables bundle size optimization.

Capabilities

Provider Configuration

Main function for configuring ng2-charts in Angular applications.

/**
 * Provides configuration for ng2-charts
 * Merges multiple configurations and creates Angular provider
 * @param configurations - Array of configuration objects to merge
 * @returns Angular provider for dependency injection
 */
function provideCharts(...configurations: readonly NgChartsConfiguration[]): Provider;

Usage Examples:

// In main.ts (standalone application)
import { bootstrapApplication } from '@angular/platform-browser';
import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideCharts(withDefaultRegisterables())
  ]
}).catch(err => console.error(err));

// With custom registerables for bundle optimization
import { BarController, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
import { provideCharts } from 'ng2-charts';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideCharts({
      registerables: [BarController, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend]
    })
  ]
});

// In NgModule (traditional application)
import { NgModule } from '@angular/core';
import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
import { AppComponent } from './app/app.component';

@NgModule({
  providers: [
    provideCharts(withDefaultRegisterables())
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Default Registerables

Convenience function that provides all default Chart.js components plus additional ones.

/**
 * Provides all default Chart.js registerables plus additional ones
 * Includes all controllers, scales, elements, and plugins from Chart.js
 * @param registerables - Additional registerables to include
 * @returns Configuration object with all registerables
 */
function withDefaultRegisterables(...registerables: ChartComponentLike[]): NgChartsConfiguration;

Usage Examples:

import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';

// Add custom chart type to default registerables
bootstrapApplication(AppComponent, {
  providers: [
    provideCharts(withDefaultRegisterables(MatrixController, MatrixElement))
  ]
});

Configuration Interface

Configuration object structure for ng2-charts.

/**
 * Configuration interface for ng2-charts
 */
interface NgChartsConfiguration {
  /** 
   * Chart.js registerables (controllers, scales, elements, plugins)
   * Used with Chart.register() internally
   */
  registerables?: readonly ChartComponentLike[];
  
  /** 
   * Default Chart.js configuration options
   * Applied globally using Chart.defaults.set()
   */
  defaults?: DeepPartial<Defaults>;
}

Configuration Token

Injection token for accessing ng2-charts configuration.

/**
 * Injection token for ng2-charts configuration
 * Used internally by BaseChartDirective to access configuration
 */
const NG_CHARTS_CONFIGURATION: InjectionToken<NgChartsConfiguration>;

Bundle Optimization

For production applications, you can reduce bundle size by registering only the Chart.js components you need:

Minimal Bar Chart Configuration

import { 
  BarController, 
  CategoryScale, 
  LinearScale, 
  BarElement, 
  Title, 
  Tooltip, 
  Legend 
} from 'chart.js';
import { provideCharts } from 'ng2-charts';

// Only includes components needed for bar charts
const barChartConfig = {
  registerables: [
    BarController,    // Bar chart controller
    CategoryScale,    // X-axis scale
    LinearScale,      // Y-axis scale  
    BarElement,       // Bar visual element
    Title,            // Chart title plugin
    Tooltip,          // Tooltip plugin
    Legend            // Legend plugin
  ]
};

bootstrapApplication(AppComponent, {
  providers: [
    provideCharts(barChartConfig)
  ]
});

Multiple Chart Types Configuration

import { 
  BarController, 
  LineController,
  PieController,
  CategoryScale, 
  LinearScale,
  RadialLinearScale,
  BarElement,
  LineElement,
  PointElement,
  ArcElement,
  Title, 
  Tooltip, 
  Legend 
} from 'chart.js';

const multiChartConfig = {
  registerables: [
    // Controllers
    BarController,
    LineController, 
    PieController,
    // Scales
    CategoryScale,
    LinearScale,
    RadialLinearScale,
    // Elements
    BarElement,
    LineElement,
    PointElement,
    ArcElement,
    // Plugins
    Title,
    Tooltip,
    Legend
  ]
};

Global Defaults Configuration

Set global defaults that apply to all charts in your application:

import { provideCharts, withDefaultRegisterables } from 'ng2-charts';

const globalConfig = {
  defaults: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: true,
        position: 'top' as const
      },
      tooltip: {
        enabled: true,
        mode: 'index' as const,
        intersect: false
      }
    },
    scales: {
      x: {
        display: true,
        grid: {
          display: false
        }
      },
      y: {
        display: true,
        beginAtZero: true
      }
    }
  }
};

bootstrapApplication(AppComponent, {
  providers: [
    provideCharts(withDefaultRegisterables(), globalConfig)
  ]
});

Advanced Configuration

Multiple Configuration Merging

import { provideCharts, withDefaultRegisterables } from 'ng2-charts';

const baseConfig = {
  defaults: {
    responsive: true,
    maintainAspectRatio: false
  }
};

const themeConfig = {
  defaults: {
    color: '#333',
    plugins: {
      legend: {
        labels: {
          color: '#333'
        }
      }
    }
  }
};

// Configurations are merged in order
bootstrapApplication(AppComponent, {
  providers: [
    provideCharts(
      withDefaultRegisterables(),
      baseConfig,
      themeConfig
    )
  ]
});

Custom Plugin Registration

import { provideCharts, withDefaultRegisterables } from 'ng2-charts';

// Custom plugin example
const customPlugin = {
  id: 'customPlugin',
  beforeDraw: (chart: any) => {
    // Custom plugin logic
  }
};

bootstrapApplication(AppComponent, {
  providers: [
    provideCharts(
      withDefaultRegisterables(customPlugin),
      {
        defaults: {
          plugins: {
            customPlugin: {
              enabled: true
            }
          }
        }
      }
    )
  ]
});