diff --git a/src/components/chart/helpers/helpers.canvas.js b/src/components/chart/helpers/helpers.canvas.js
index 08ea1f043..7937f5288 100644
--- a/src/components/chart/helpers/helpers.canvas.js
+++ b/src/components/chart/helpers/helpers.canvas.js
@@ -253,7 +253,7 @@ export default {
 
     for (let ix = 0; ix < stops.length; ix++) {
       const stopIdx = stops[ix][0] ?? 0;
-      const stopColor = stops[ix][1] ?? '#FFFFFF';
+      const stopColor = stops[ix][1] ?? 'rgba(255, 255, 255, 0)';
       const noneDownplayOpacity = stopColor.includes('rgba') ? Util.getOpacity(stopColor) : 1;
       const opacity = isDownplay ? 0.1 : noneDownplayOpacity;
 
diff --git a/src/components/chart/helpers/helpers.util.js b/src/components/chart/helpers/helpers.util.js
index c68b2d9e4..4c1a0534d 100644
--- a/src/components/chart/helpers/helpers.util.js
+++ b/src/components/chart/helpers/helpers.util.js
@@ -36,7 +36,7 @@ export default {
     const noneWhiteSpaceColorStr = colorStr.replace(/ /g, '');
     const isHEX = /^#(?:[A-Fa-f0-9]{3}){1,2}$/.exec(noneWhiteSpaceColorStr);
     const isRGB = /^rgb[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*(?:,(?![)])|(?=[)]))){3}[)]$/.exec(noneWhiteSpaceColorStr);
-    const isRGBA = /^rgba[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*,){3}\s*0*(?:\.\d+|1(?:\.0*)?)\s*[)]$/.exec(noneWhiteSpaceColorStr);
+    const isRGBA = /^rgba[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*,){3}\s*0*(?:\.\d+|1?)\s*[)]$/.exec(noneWhiteSpaceColorStr);
     let result = '';
 
     if (isHEX) {