BREAKING drop hardcoded and generated colors (#1806)

`builtInDefaults` and `baseColors` were dropped. That means that colors
will change to be the default as defined by Chart.js, and we will no
longer generate colors on the fly.

If you need this kind of features, see https://www.chartjs.org/docs/latest/general/colors.html#advanced-color-palettes

As discussed in #1801 (comment)

README.md

@@ -64,10 +64,10 @@ changes to start using the library right away.
 4. Provide a configuration, typically in your `main.ts`:
 
    ```typescript
-   import { provideCharts, withColorGenerator, withDefaultRegisterables } from 'ng2-charts';
+   import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
 
    bootstrapApplication(AppComponent, {
-     providers: [provideCharts(withDefaultRegisterables(), withColorGenerator())],
+     providers: [provideCharts(withDefaultRegisterables())],
    }).catch((err) => console.error(err));
    ```
 
@@ -80,10 +80,10 @@ changes to start using the library right away.
    Or in your AppModule:
 
    ```typescript
-   import { provideCharts, withColorGenerator, withDefaultRegisterables } from 'ng2-charts';
+   import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
 
    @NgModule({
-     providers: [provideCharts(withDefaultRegisterables(), withColorGenerator())],
+     providers: [provideCharts(withDefaultRegisterables())],
      bootstrap: [AppComponent],
    })
    export class AppModule {}
@@ -248,9 +248,8 @@ documentation
 
 ### Colors
 
-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
 

apps/ng2-charts-demo/src/app/landing/landing.component.html

@@ -30,13 +30,12 @@ <h2>API</h2>
     ```typescript
     import &#123;
     provideCharts,
-    withColorGenerator,
     withDefaultRegisterables,
     &#125; from 'ng2-charts';
 
     bootstrapApplication(AppComponent, &#123;
     providers: [
-    provideCharts(withDefaultRegisterables(), withColorGenerator()),
+    provideCharts(withDefaultRegisterables()),
     ],
     &#125;).catch((err) => console.error(err));
     ```

apps/ng2-charts-demo/src/main.ts

@@ -12,11 +12,7 @@ import {
 import { bootstrapApplication } from '@angular/platform-browser';
 import { LanguageFn } from 'highlight.js';
 import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
-import {
-  provideCharts,
-  withColorGenerator,
-  withDefaultRegisterables,
-} from 'ng2-charts';
+import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
 import { LandingComponent } from './app/landing/landing.component';
 import { LineChartComponent } from './app/line-chart/line-chart.component';
 import { BarChartComponent } from './app/bar-chart/bar-chart.component';
@@ -96,7 +92,7 @@ bootstrapApplication(AppComponent, {
   providers: [
     provideMarkdown({ loader: HttpClient }),
     provideAnimations(),
-    provideCharts(withDefaultRegisterables(), withColorGenerator(), {
+    provideCharts(withDefaultRegisterables(), {
       defaults: {
         // For consistent rendering across CI and local envs
         font: { family: 'Arial' },

libs/ng2-charts/README.md

@@ -64,10 +64,10 @@ changes to start using the library right away.
 4. Provide a configuration, typically in your `main.ts`:
 
    ```typescript
-   import { provideCharts, withColorGenerator, withDefaultRegisterables } from 'ng2-charts';
+   import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
 
    bootstrapApplication(AppComponent, {
-     providers: [provideCharts(withDefaultRegisterables(), withColorGenerator())],
+     providers: [provideCharts(withDefaultRegisterables())],
    }).catch((err) => console.error(err));
    ```
 
@@ -80,10 +80,10 @@ changes to start using the library right away.
    Or in your AppModule:
 
    ```typescript
-   import { provideCharts, withColorGenerator, withDefaultRegisterables } from 'ng2-charts';
+   import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
 
    @NgModule({
-     providers: [provideCharts(withDefaultRegisterables(), withColorGenerator())],
+     providers: [provideCharts(withDefaultRegisterables())],
      bootstrap: [AppComponent],
    })
    export class AppModule {}
@@ -248,9 +248,8 @@ documentation
 
 ### Colors
 
-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
 

libs/ng2-charts/src/index.ts

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

libs/ng2-charts/src/lib/ng-charts.provider.ts

@@ -1,7 +1,6 @@
 import { InjectionToken } from '@angular/core';
 import { ChartComponentLike, registerables } from 'chart.js';
 import { merge } from 'lodash-es';
-import { builtInDefaults } from './get-colors';
 import { AnyObject } from 'chart.js/dist/types/basic';
 
 export const NG_CHARTS_CONFIGURATION =
@@ -26,14 +25,6 @@ export function withDefaultRegisterables(): NgChartsConfiguration {
   return { registerables: registerables };
 }
 
-/**
- * Provide predefined default colors (which are exported as `baseColors`), and then, if there are more
- * datasets than colors, colors are generated randomly.
- */
-export function withColorGenerator(): NgChartsConfiguration {
-  return { defaults: builtInDefaults };
-}
-
 /**
  * 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.