From 03d1d5caa2b7760334e4f0e94960dd5275a3466a Mon Sep 17 00:00:00 2001
From: Jacco van den Berg <jaccoberg2281@gmail.com>
Date: Tue, 15 Oct 2024 20:31:51 +0200
Subject: [PATCH] Allow array's in backgroundColor defaults and add hover
 background and border color to defaults  (#11931)

* Allow array as default and add extra default options

* Add test

---------

Co-authored-by: Jacco van den Berg <jacco@jem-id.nl>
---
 src/types/index.d.ts   | 14 ++++++++++++--
 test/types/defaults.ts | 16 ++++++++++++++++
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index fcdd44fe06b..5690a432e60 100644
--- 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 84071849245..ae3eff23ac5 100644
--- 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