Add legend left padding

tremorlabs · May 27, 2024 · e63ee2e · e63ee2e
1 parent bc7fb44
commit e63ee2e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/src/components/AreaChart/AreaChart.tsx b/src/components/AreaChart/AreaChart.tsx
@@ -319,6 +319,7 @@ const ChartLegend = (
   onClick?: (category: string, color: string) => void,
   enableLegendSlider?: boolean,
   legendPosition?: "left" | "center" | "right",
+  yAxisWidth?: number,
 ) => {
   const legendRef = React.useRef<HTMLDivElement>(null)
 
@@ -330,9 +331,13 @@ const ChartLegend = (
 
   const filteredPayload = payload.filter((item: any) => item.type !== "none")
 
+  const paddingLeft =
+    legendPosition === "left" && yAxisWidth ? yAxisWidth - 8 : 0
+
   return (
     <div
       ref={legendRef}
+      style={{ paddingLeft: paddingLeft }}
       className={cx(
         "flex items-center",
         { "justify-center": legendPosition === "center" },
@@ -736,6 +741,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
                       : undefined,
                     enableLegendSlider,
                     legendPosition,
+                    yAxisWidth,
                   )
                 }
               />

diff --git a/src/components/LineChart/LineChart.tsx b/src/components/LineChart/LineChart.tsx
@@ -318,6 +318,7 @@ const ChartLegend = (
   onClick?: (category: string, color: string) => void,
   enableLegendSlider?: boolean,
   legendPosition?: "left" | "center" | "right",
+  yAxisWidth?: number,
 ) => {
   const legendRef = React.useRef<HTMLDivElement>(null)
 
@@ -329,9 +330,13 @@ const ChartLegend = (
 
   const filteredPayload = payload.filter((item: any) => item.type !== "none")
 
+  const paddingLeft =
+    legendPosition === "left" && yAxisWidth ? yAxisWidth - 8 : 0
+
   return (
     <div
       ref={legendRef}
+      style={{ paddingLeft: paddingLeft }}
       className={cx(
         "flex items-center",
         { "justify-center": legendPosition === "center" },
@@ -726,6 +731,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
                       : undefined,
                     enableLegendSlider,
                     legendPosition,
+                    yAxisWidth,
                   )
                 }
               />