ng2-charts - npm Package Compare versions

Comparing version 5.0.4 to 6.0.0-beta.1

index.d.ts

@@ -1,4 +0,3 @@
-export * from './lib/ng-charts.module';
+export * from './lib/ng-charts.provider';
 export * from './lib/base-chart.directive';
 export * from './lib/theme.service';
-export * from './lib/base-colors';

lib/base-chart.directive.d.ts

 import { ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import { Chart, ChartConfiguration, ChartEvent, ChartType, DefaultDataPoint, Plugin } from 'chart.js';
+import { Chart, ChartConfiguration, ChartEvent, ChartType, DefaultDataPoint, Plugin, UpdateMode } from 'chart.js';
 import { ThemeService } from './theme.service';
+import { NgChartsConfiguration } from './ng-charts.provider';
 import * as i0 from "@angular/core";
@@ -27,7 +28,7 @@ export declare class BaseChartDirective<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> implements OnDestroy, OnChanges {
     private themeOverrides;
-    constructor(element: ElementRef, zone: NgZone, themeService: ThemeService);
+    constructor(element: ElementRef, zone: NgZone, themeService: ThemeService, config?: NgChartsConfiguration);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     render(): Chart<TType, TData, TLabel>;
-    update(duration?: any): void;
+    update(mode?: UpdateMode): void;
     hideDataset(index: number, hidden: boolean): void;
@@ -40,4 +41,4 @@ isDatasetHidden(index: number): boolean | undefined;
     private getChartData;
-    static ɵfac: i0.ɵɵFactoryDeclaration<BaseChartDirective<any, any, any>, never>;
-    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, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseChartDirective<any, any, any>, [null, null, null, { optional: true; }]>;
+    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>;
 }

package.json

 {
-  "version": "5.0.4",
+  "version": "6.0.0-beta.1",
   "name": "ng2-charts",
   "description": "Reactive, responsive, beautiful charts for Angular based on Chart.js",
   "peerDependencies": {
-    "@angular/platform-browser": ">=16.0.0",
-    "@angular/common": ">=16.0.0",
-    "@angular/core": ">=16.0.0",
-    "@angular/cdk": ">=16.0.0",
+    "@angular/platform-browser": ">=17.0.0",
+    "@angular/common": ">=17.0.0",
+    "@angular/core": ">=17.0.0",
+    "@angular/cdk": ">=17.0.0",
     "chart.js": "^3.4.0 || ^4.0.0",
@@ -11,0 +11,0 @@ "rxjs": "^6.5.3 || ^7.4.0"

README.md

@@ -21,3 +21,3 @@ # ng2-charts [![npm version](https://badge.fury.io/js/ng2-charts.svg)](http://badge.fury.io/js/ng2-charts) [![npm downloads](https://img.shields.io/npm/dm/ng2-charts.svg)](https://npmjs.org/ng2-charts) ![Travis CI](https://travis-ci.org/valor-software/ng2-charts.svg?branch=development) [slack](https://ngx-home.slack.com)
 
-The required packages will be automatically installed, and your `app.module.ts` will be updated with the required
+The required packages will be automatically installed, and your `app.config.ts` will be updated with the required
 changes to start using the library right away.
@@ -27,13 +27,13 @@
 
-1. You can install **_ng2-charts_** using npm
+1. You can install **_ng2-charts_** using npm:
 
-```bash
-npm install ng2-charts --save
-```
+   ```bash
+   npm install ng2-charts --save
+   ```
 
-or yarn
+   or yarn:
 
-```bash
-yarn add ng2-charts --save
-```
+   ```bash
+   yarn add ng2-charts --save
+   ```
 
@@ -44,27 +44,58 @@ 2. You will also need to install and include `Chart.js` library in your application (it is a peer dependency of this
 
-```bash
-npm install chart.js --save
-```
+   ```bash
+   npm install chart.js --save
+   ```
 
-or with yarn:
+   or with yarn:
 
-```bash
-yarn add  chart.js --save
-```
+   ```bash
+   yarn add  chart.js --save
+   ```
 
-3. Import the `NgChartsModule` in your app main module:
+3. Import the directive in your standalone component:
 
-```typescript
-import { NgChartsModule } from 'ng2-charts';
+   ```typescript
+   import { BaseChartDirective } from 'ng2-charts';
 
-// In your App's module:
-imports: [NgChartsModule];
-```
+   @Component({
+     standalone: true,
+     imports: [BaseChartDirective],
+   })
+   export class MyComponent {}
+   ```
 
-### Angular version compability table
+4. Provide a configuration, typically in your `main.ts`:
 
+   ```typescript
+   import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
+
+   bootstrapApplication(AppComponent, {
+     providers: [provideCharts(withDefaultRegisterables())],
+   }).catch((err) => console.error(err));
+   ```
+
+   Alternatively, include a minimal configuration to reduce the bundle size, eg:
+
+   ```typescript
+   provideCharts({ registerables: [BarController, Legend, Colors] });
+   ```
+
+   Or in your AppModule:
+
+   ```typescript
+   import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
+
+   @NgModule({
+     providers: [provideCharts(withDefaultRegisterables())],
+     bootstrap: [AppComponent],
+   })
+   export class AppModule {}
+   ```
+
+### Angular version compatibility table
+
 <table role="table">
  <tbody><tr>
   <td></td>
-  <td colspan="5">ng2-chart version</td>
+  <td colspan="6">ng2-chart version</td>
  </tr>
@@ -79,2 +110,3 @@
   <td>v5.x</td>
+  <td>v6.x</td>
  </tr>
@@ -89,2 +121,3 @@
   <td></td>
+  <td></td>
  </tr>
@@ -99,2 +132,3 @@
   <td></td>
+  <td></td>
  </tr>
@@ -109,2 +143,3 @@
   <td></td>
+  <td></td>
  </tr>
@@ -119,2 +154,3 @@
   <td></td>
+  <td></td>
  </tr>
@@ -129,2 +165,3 @@
   <td></td>
+  <td></td>
  </tr>
@@ -139,2 +176,3 @@
   <td></td>
+  <td></td>
  </tr>
@@ -149,2 +187,3 @@
   <td></td>
+  <td></td>
  </tr>
@@ -159,4 +198,15 @@
   <td>✓</td>
+  <td></td>
  </tr>
 
+ <tr>
+  <td>17</td>
+  <td></td>
+  <td></td>
+  <td></td>
+  <td></td>
+  <td>✓</td>
+  <td>✓</td>
+ </tr>
+
 </tbody></table>
@@ -213,9 +263,8 @@
 
-The library comes with a set of predefined default colors (which are exported as `baseColors`). If there are more
-datasets than colors, colors are generated randomly. You can specify custom colors by following
-these [instructions](https://www.chartjs.org/docs/latest/general/colors.html).
+By default, this library uses the colors as [defined by Chart.js](https://www.chartjs.org/docs/latest/general/colors.html#default-color-palette).
+If you need more control on colors, eg: generating colors on the fly, see [the advanced color palettes](https://www.chartjs.org/docs/latest/general/colors.html#advanced-color-palettes).
 
 ### Dynamic Theming
 
-The `NgChartsModule` provides a service called `ThemeService` which allows clients to set a structure specifying colors
+The `ThemeService` allows clients to set a structure specifying colors
 override settings. This service may be called when the dynamic theme changes, with colors which fit the theme. The
@@ -271,25 +320,2 @@ structure is interpreted as an override, with special functionality when dealing with arrays. Example:
 
-## Schematics
-
-There are schematics that may be used to add this library to your project and generate chart components using Angular
-CLI.
-
-### Installation of library through ng-add schematics
-
-```bash
-ng add ng2-charts
-```
-
-This schematics will add the `NgChartsModule` as an imported module in the main app module (or another module as specified
-in the `--module` command option).
-
-### Example of Generating a Line Chart using Angular CLI
-
-```bash
-ng generate ng2-charts:line my-line-chart
-```
-
-This calls angular's component schematics and then modifies the result, so all the options for the component schematic
-are also usable here.
-
 ## Troubleshooting
@@ -314,2 +340,2 @@
 [//]: # 'super hidden section about running `npm test:ci` in win11 wsl2'
-[//]: # 'export CHROME_BIN=/mnt/c/Program\\ Files\ (x86)/Google/Chrome/Application/chrome.exe'
+[//]: # 'export CHROME_BIN=/mnt/c/Program\\ Files\\ (x86)/Google/Chrome/Application/chrome.exe'

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

327

increased by8.64%

Worsened metrics

Total package byte prevSize

68701

decreased by-50.44%

Number of package files

14

decreased by-86.79%

Lines of code

505

decreased by-59.63%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes