Allow array's in backgroundColor defaults and add hover background an…

…d border color to defaults (#11931) * Allow array as default and add extra default options * Add test --------- Co-authored-by: Jacco van den Berg <[email protected]>
chartjs · Oct 15, 2024 · 03d1d5c · 03d1d5c
1 parent 22a0ba9
commit 03d1d5c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git 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
@@ -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