From 1b9ba48adbcd2bd057242adde72955b810749e5f Mon Sep 17 00:00:00 2001
From: jinhee park <jinhee@ex-em.com>
Date: Thu, 17 Mar 2022 16:59:16 +0900
Subject: [PATCH] =?UTF-8?q?[#1097]=20Line=20Chart=20>=20Legend=20=EC=98=81?=
 =?UTF-8?q?=EC=97=AD=20fill:=20true=20=EC=98=B5=EC=85=98=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C=20###################################=201.=20fill:=20?=
 =?UTF-8?q?true=20=EC=98=B5=EC=85=98=EC=9D=84=20=EA=B0=80=EC=A7=84=20serie?=
 =?UTF-8?q?s=EB=8A=94=20=EB=8B=A4=EB=A5=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC?=
 =?UTF-8?q?=EB=A1=9C=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chart/plugins/plugins.legend.js           | 30 +++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/chart/plugins/plugins.legend.js b/src/components/chart/plugins/plugins.legend.js
index b97dbaee8..5fd013d76 100644
--- a/src/components/chart/plugins/plugins.legend.js
+++ b/src/components/chart/plugins/plugins.legend.js
@@ -106,13 +106,24 @@ const modules = {
       if (isActive) {
         this.seriesInfo.count--;
         colorDOM.style.backgroundColor = opt.inactive;
+        colorDOM.style.borderColor = opt.inactive;
         nameDOM.style.color = opt.inactive;
       } else {
         this.seriesInfo.count++;
+
+        let seriesColor;
         if (typeof series.color !== 'string') {
-          colorDOM.style.backgroundColor = series.color[series.color.length - 1][1];
+          seriesColor = series.color[series.color.length - 1][1];
+        } else {
+          seriesColor = series.color;
+        }
+
+        if (series.type === 'line' && series.fill) {
+          colorDOM.style.height = '8px';
+          colorDOM.style.backgroundColor = `${seriesColor}80`;
+          colorDOM.style.border = `1px solid ${seriesColor}`;
         } else {
-          colorDOM.style.backgroundColor = series.color;
+          colorDOM.style.backgroundColor = seriesColor;
         }
 
         nameDOM.style.color = opt.color;
@@ -264,7 +275,7 @@ const modules = {
     containerDOM.className = 'ev-chart-legend-container';
     colorDOM.className = 'ev-chart-legend-color';
 
-    if (series.type === 'line' && series.point) {
+    if (series.type === 'line' && series.point && !series.fill) {
       colorDOM.className += ' ev-chart-legend-color--point-line';
     }
 
@@ -272,10 +283,19 @@ const modules = {
 
     nameDOM.series = series;
 
+    let seriesColor;
     if (typeof series.color !== 'string') {
-      colorDOM.style.backgroundColor = series.color[series.color.length - 1][1];
+      seriesColor = series.color[series.color.length - 1][1];
+    } else {
+      seriesColor = series.color;
+    }
+
+    if (series.type === 'line' && series.fill) {
+      colorDOM.style.height = '8px';
+      colorDOM.style.backgroundColor = `${seriesColor}80`;
+      colorDOM.style.border = `1px solid ${seriesColor}`;
     } else {
-      colorDOM.style.backgroundColor = series.color;
+      colorDOM.style.backgroundColor = seriesColor;
     }
 
     colorDOM.dataset.type = 'color';