fix: split background and sparkline with alpha mask

elastic · Oct 6, 2023 · 6bd75a4 · 6bd75a4
1 parent 290ab5b
commit 6bd75a4
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/packages/charts/src/chart_types/metric/renderer/dom/sparkline.tsx b/packages/charts/src/chart_types/metric/renderer/dom/sparkline.tsx
@@ -51,13 +51,27 @@ export const SparkLine: FunctionComponent<{
         role="img"
         aria-labelledby={`${titleId} ${descriptionId}`}
       >
+        <defs>
+          <mask id="sparkline-mask">
+            <rect x={0} y={0} width={1} height={1} fill="white" mask="url(#sparkline-mask)" />
+            <path
+              d={path.area(trend)}
+              transform="translate(0, 0.5),scale(1,0.5)"
+              fill="black"
+              stroke="none"
+              strokeWidth={0}
+            />
+          </mask>
+        </defs>
+
         <title id={titleId} className="echScreenReaderOnly">
           {trendA11yTitle}
         </title>
         <text id={descriptionId} className="echScreenReaderOnly" fontSize={0}>
           {trendA11yDescription}
         </text>
-        <rect x={0} y={0} width={1} height={1} fill={color} />
+
+        <rect x={0} y={0} width={1} height={1} fill={color} mask="url(#sparkline-mask)" />
         <path
           d={path.area(trend)}
           transform="translate(0, 0.5),scale(1,0.5)"