Merge pull request #1803 from Shopify/remove-line-gradient-for-line-c…

…harts-with-over-3-lines Remove line gradient for line charts with over 3 lines
Shopify · Feb 10, 2025 · b6bbb59 · b6bbb59
2 parents 97489c6 + a0db075
commit b6bbb59
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/packages/polaris-viz-core/src/components/LineSeries/LineSeries.tsx b/packages/polaris-viz-core/src/components/LineSeries/LineSeries.tsx
@@ -36,6 +36,7 @@ export interface LineSeriesProps {
   hiddenIndexes?: number[];
   theme: string;
   type?: 'default' | 'spark';
+  shouldShowArea?: boolean;
 }
 
 export function LineSeries({
@@ -48,6 +49,7 @@ export function LineSeries({
   type = 'default',
   xScale,
   yScale,
+  shouldShowArea = true,
 }: LineSeriesProps) {
   const index = data?.metadata?.relatedIndex ?? lineSeriesIndex;
 
@@ -133,7 +135,9 @@ export function LineSeries({
   const PathHoverTargetSize = 15;
 
   const showArea =
-    selectedTheme.line.hasArea && data?.styleOverride?.line?.hasArea !== false;
+    selectedTheme.line.hasArea &&
+    data?.styleOverride?.line?.hasArea !== false &&
+    shouldShowArea;
 
   const zeroLineY = yScale(0);
 

diff --git a/packages/polaris-viz/src/components/LineChart/Chart.tsx b/packages/polaris-viz/src/components/LineChart/Chart.tsx
@@ -242,6 +242,8 @@ export function Chart({
 
   const halfXAxisLabelWidth = xAxisDetails.labelWidth / 2;
 
+  const shouldShowArea = data.length <= 3;
+
   return (
     <Fragment>
       <ChartElements.Svg
@@ -321,6 +323,7 @@ export function Chart({
                 xScale={xScale}
                 yScale={yScale}
                 type="default"
+                shouldShowArea={shouldShowArea}
               />
             );
           })}