Allow array's in backgroundColor defaults and add hover background and border color...

* Allow array as default and add extra default options

* Add test

---------

Co-authored-by: Jacco van den Berg <jacco@jem-id.nl>

diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index fcdd44fe06be71e45ae9aa40da747ffd37c84884..5690a432e6027ae36007d0d08126298ca68a1cd1 100644 (file)
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -1611,12 +1611,22 @@ export interface CoreChartOptions<TType extends ChartType> extends ParsingOption
    * base background color
    * @see Defaults.backgroundColor
    */
-  backgroundColor: Scriptable<Color, ScriptableContext<TType>>;
+  backgroundColor: ScriptableAndArray<Color, ScriptableContext<TType>>;
+  /**
+   * base hover background color
+   * @see Defaults.hoverBackgroundColor
+   */
+  hoverBackgroundColor: ScriptableAndArray<Color, ScriptableContext<TType>>;
   /**
    * base border color
    * @see Defaults.borderColor
    */
-  borderColor: Scriptable<Color, ScriptableContext<TType>>;
+  borderColor: ScriptableAndArray<Color, ScriptableContext<TType>>;
+  /**
+   * base hover border color
+   * @see Defaults.hoverBorderColor
+   */
+  hoverBorderColor: ScriptableAndArray<Color, ScriptableContext<TType>>;
   /**
    * base font
    * @see Defaults.font

diff --git a/test/types/defaults.ts b/test/types/defaults.ts
index 8407184924545afcf6e31f03dbedb8e2a206c762..ae3eff23ac55f4873d850771f055168c3c27e1d6 100644 (file)
--- a/test/types/defaults.ts
+++ b/test/types/defaults.ts
@@ -16,6 +16,22 @@ Chart.defaults.font.size = '8';
 // @ts-expect-error should be number
 Chart.defaults.font.size = () => '10';
 
+Chart.defaults.backgroundColor = 'red';
+Chart.defaults.backgroundColor = ['red', 'blue'];
+Chart.defaults.backgroundColor = (ctx) => ctx.datasetIndex % 2 === 0 ? 'red' : 'blue';
+
+Chart.defaults.borderColor = 'red';
+Chart.defaults.borderColor = ['red', 'blue'];
+Chart.defaults.borderColor = (ctx) => ctx.datasetIndex % 2 === 0 ? 'red' : 'blue';
+
+Chart.defaults.hoverBackgroundColor = 'red';
+Chart.defaults.hoverBackgroundColor = ['red', 'blue'];
+Chart.defaults.hoverBackgroundColor = (ctx) => ctx.datasetIndex % 2 === 0 ? 'red' : 'blue';
+
+Chart.defaults.hoverBorderColor = 'red';
+Chart.defaults.hoverBorderColor = ['red', 'blue'];
+Chart.defaults.hoverBorderColor = (ctx) => ctx.datasetIndex % 2 === 0 ? 'red' : 'blue';
+
 Chart.defaults.font = {
   family: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
   size: 10