Logo for jsDocs.io

ng2-charts

  • Version 8.0.0
  • Published
  • 52.1 kB
  • 2 dependencies
  • MIT license

Install

npm i ng2-charts
yarn add ng2-charts
pnpm add ng2-charts

Overview

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

Index

Variables

Functions

Classes

Type Aliases

Variables

variable NG_CHARTS_CONFIGURATION

const NG_CHARTS_CONFIGURATION: InjectionToken<NgChartsConfiguration>;

    Functions

    function provideCharts

    provideCharts: (...configurations: readonly NgChartsConfiguration[]) => {
        provide: InjectionToken<NgChartsConfiguration>;
        useValue: NgChartsConfiguration;
    };

    • Provide configuration for ngCharts. In most cases, you have to pass it some registerables. So either withDefaultRegisterables(), or a custom list of registerables tailored to your needs to reduce bundle size.

    function withDefaultRegisterables

    withDefaultRegisterables: (
        ...registerables: ChartComponentLike[]
    ) => NgChartsConfiguration;

    • Provide all the default registerable as defined by Chart.js

    Classes

    class BaseChartDirective

    class BaseChartDirective<
        TType extends ChartType = ChartType,
        TData = DefaultDataPoint<TType>,
        TLabel = unknown
    > implements OnDestroy, OnChanges {}

      constructor

      constructor(
          element: ElementRef,
          zone: NgZone,
          themeService: ThemeService,
          config?: NgChartsConfiguration
      );

        property chart

        chart?: Chart<TType, TData, TLabel>;

          property chartClick

          chartClick: EventEmitter<{ event?: ChartEvent; active?: object[] }>;

            property chartHover

            chartHover: EventEmitter<{ event: ChartEvent; active: object[] }>;

              property ctx

              ctx: string;

                property data

                data?: ChartConfiguration<TType, TData, TLabel>;

                  property datasets

                  datasets?: ChartConfiguration<TType, TData, TLabel>;

                    property labels

                    labels?: ChartConfiguration<TType, TData, TLabel>;

                      property legend

                      legend?: boolean;

                        property options

                        options: ChartConfiguration<TType, TData, TLabel>;

                          property ɵdir

                          static ɵdir: i0.ɵɵDirectiveDeclaration<
                              BaseChartDirective<any, any, any>,
                              'canvas[baseChart]',
                              ['base-chart'],
                              {
                                  type: { alias: 'type'; required: false };
                                  legend: { alias: 'legend'; required: false };
                                  data: { alias: 'data'; required: false };
                                  options: { alias: 'options'; required: false };
                                  plugins: { alias: 'plugins'; required: false };
                                  labels: { alias: 'labels'; required: false };
                                  datasets: { alias: 'datasets'; required: false };
                              },
                              { chartClick: 'chartClick'; chartHover: 'chartHover' },
                              never,
                              never,
                              true,
                              never
                          >;

                            property ɵfac

                            static ɵfac: i0.ɵɵFactoryDeclaration<
                                BaseChartDirective<any, any, any>,
                                [null, null, null, { optional: true }]
                            >;

                              property plugins

                              plugins: Plugin<TType>[];

                                property type

                                type: ChartConfiguration<TType, TData, TLabel>;

                                  method hideDataset

                                  hideDataset: (index: number, hidden: boolean) => void;

                                    method isDatasetHidden

                                    isDatasetHidden: (index: number) => boolean | undefined;

                                      method ngOnChanges

                                      ngOnChanges: (changes: SimpleChanges) => void;

                                        method ngOnDestroy

                                        ngOnDestroy: () => void;

                                          method render

                                          render: () => Chart<TType, TData, TLabel>;

                                            method toBase64Image

                                            toBase64Image: () => string | undefined;

                                              method update

                                              update: (mode?: UpdateMode) => void;

                                                class ThemeService

                                                class ThemeService {}

                                                  property colorschemesOptions

                                                  colorschemesOptions: BehaviorSubject<any>;

                                                    property ɵfac

                                                    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService, never>;

                                                      property ɵprov

                                                      static ɵprov: i0.ɵɵInjectableDeclaration<ThemeService>;

                                                        method getColorschemesOptions

                                                        getColorschemesOptions: () => ChartConfiguration;

                                                          method setColorschemesOptions

                                                          setColorschemesOptions: (options: ChartConfiguration) => void;

                                                            Type Aliases

                                                            type NgChartsConfiguration

                                                            type NgChartsConfiguration = {
                                                                /**
                                                                 * Any registerable that can be used with `Chart.register()`, such as plugins, controllers, scales, and elements.
                                                                 */
                                                                registerables?: readonly ChartComponentLike[];
                                                                /**
                                                                 * Default configuration that can be used with `defaults.set()`.
                                                                 */
                                                                defaults?: DeepPartial<Defaults>;
                                                            };

                                                              Package Files (4)

                                                              Dependencies (2)

                                                              Dev Dependencies (0)

                                                              No dev dependencies.

                                                              Peer Dependencies (6)

                                                              Badge

                                                              To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                              You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/ng2-charts.

                                                              • Markdown
                                                                [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/ng2-charts)
                                                              • HTML
                                                                <a href="https://www.jsdocs.io/package/ng2-charts"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>