fixes a bug

tremorlabs · Sep 15, 2024 · c9c8352 · c9c8352
1 parent c7df68f
commit c9c8352
Showing 1 changed file with 24 additions and 21 deletions.
diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx
@@ -291,23 +291,24 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
                 }
               />
             ) : null}
-            {categories.map((category) => {
-              return (
-                <defs key={category}>
-                  {showGradient ? (
-                    <linearGradient
-                      className={
-                        getColorClassNames(
-                          categoryColors.get(category) ?? BaseColors.Gray,
-                          colorPalette.text,
-                        ).textColor
-                      }
-                      id={categoryColors.get(category)}
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="1"
-                    >
+              {categories.map((category) => {
+                const gradientId = (categoryColors.get(category) ?? BaseColors.Gray).replace('#', '');
+                return (
+                  <defs key={category}>
+                    {showGradient ? (
+                      <linearGradient
+                        className={
+                          getColorClassNames(
+                            categoryColors.get(category) ?? BaseColors.Gray,
+                            colorPalette.text,
+                          ).textColor
+                        }
+                        id={gradientId}
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                      >
                       <stop
                         offset="5%"
                         stopColor="currentColor"
@@ -319,13 +320,13 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
                     </linearGradient>
                   ) : (
                     <linearGradient
-                      className={
+                    className={
                         getColorClassNames(
                           categoryColors.get(category) ?? BaseColors.Gray,
                           colorPalette.text,
                         ).textColor
                       }
-                      id={categoryColors.get(category)}
+                      id={gradientId}
                       x1="0"
                       y1="0"
                       x2="0"
@@ -342,14 +343,16 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
                 </defs>
               );
             })}
-            {categories.map((category) => (
+            {categories.map((category) => {
+              const gradientId = (categoryColors.get(category) ?? BaseColors.Gray).replace('#', '');
               <Area
                 className={
                   getColorClassNames(
                     categoryColors.get(category) ?? BaseColors.Gray,
                     colorPalette.text,
                   ).strokeColor
                 }
+                fill={`url(#${gradientId})`}
                 strokeOpacity={activeDot || (activeLegend && activeLegend !== category) ? 0.3 : 1}
                 activeDot={(props: any) => {
                   const { cx, cy, stroke, strokeLinecap, strokeLinejoin, strokeWidth, dataKey } =
@@ -466,4 +469,4 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
 
 AreaChart.displayName = "AreaChart";
 
-export default AreaChart;
+export default AreaChart;