From 16e6acc6b94fd02acd72535e0face94aedfcf5d0 Mon Sep 17 00:00:00 2001
From: Jacco van den Berg <39033624+LeeLenaleee@users.noreply.github.com>
Date: Mon, 21 Feb 2022 03:31:42 +0100
Subject: [PATCH] Allow array for line opts in dataset (#10179)

* fix line as array ts error

* added test

* implement only for the border,background color and radius
---
 types/index.esm.d.ts                          |  6 ++++--
 types/tests/controllers/line_styling_array.ts | 13 +++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 types/tests/controllers/line_styling_array.ts

diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
index a4f463c25b1..ace3a249f7c 100644
--- a/types/index.esm.d.ts
+++ b/types/index.esm.d.ts
@@ -177,8 +177,10 @@ export interface LineControllerDatasetOptions
   extends ControllerDatasetOptions,
   ScriptableAndArrayOptions<PointPrefixedOptions, ScriptableContext<'line'>>,
   ScriptableAndArrayOptions<PointPrefixedHoverOptions, ScriptableContext<'line'>>,
-  ScriptableOptions<LineOptions, ScriptableContext<'line'>>,
-  ScriptableOptions<LineHoverOptions, ScriptableContext<'line'>>,
+  ScriptableOptions<Omit<LineOptions, keyof CommonElementOptions>, ScriptableContext<'line'>>,
+  ScriptableAndArrayOptions<CommonElementOptions, ScriptableContext<'line'>>,
+  ScriptableOptions<Omit<LineHoverOptions, keyof CommonHoverOptions>, ScriptableContext<'line'>>,
+  ScriptableAndArrayOptions<CommonHoverOptions, ScriptableContext<'line'>>,
   AnimationOptions<'line'> {
   /**
    * The ID of the x axis to plot this dataset on.
diff --git a/types/tests/controllers/line_styling_array.ts b/types/tests/controllers/line_styling_array.ts
new file mode 100644
index 00000000000..3b6c6733c45
--- /dev/null
+++ b/types/tests/controllers/line_styling_array.ts
@@ -0,0 +1,13 @@
+import { Chart } from '../../index.esm';
+
+const chart = new Chart('id', {
+  type: 'line',
+  data: {
+    labels: [],
+    datasets: [{
+      data: [],
+      backgroundColor: ['red', 'blue'],
+      hoverBackgroundColor: ['red', 'blue'],
+    }]
+  },
+});