From deb8b85d45b6c6106ec677620d290920543ce377 Mon Sep 17 00:00:00 2001
From: AmirReza Jamali <amir7jamali.ar@yahoo.com>
Date: Wed, 15 Apr 2026 13:19:50 +0330
Subject: [PATCH] refactor(PaymentsOverviewChart): enhance chart responsiveness
 and layout

- Updated the PaymentsOverviewChart component to improve responsiveness by enabling redraw on parent and window resize.
- Adjusted chart options for better label handling and grid padding.
- Modified the container div to ensure full width and height for the chart display.
---
 .../Charts/payments-overview/chart.tsx         | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/Charts/payments-overview/chart.tsx b/src/components/Charts/payments-overview/chart.tsx
index b1c8a8c..8b9d7ce 100644
--- a/src/components/Charts/payments-overview/chart.tsx
+++ b/src/components/Charts/payments-overview/chart.tsx
@@ -24,12 +24,13 @@ export function PaymentsOverviewChart({ data }: PropsType) {
     },
     colors: ["#5750F1", "#0ABEF9"],
     chart: {
-      height: 310,
       type: "area",
       toolbar: {
         show: false,
       },
       fontFamily: "inherit",
+      redrawOnParentResize: true,
+      redrawOnWindowResize: true,
     },
     fill: {
       gradient: {
@@ -61,6 +62,9 @@ export function PaymentsOverviewChart({ data }: PropsType) {
     },
     grid: {
       strokeDashArray: 5,
+      padding: {
+        right: 8,
+      },
       yaxis: {
         lines: {
           show: true,
@@ -82,11 +86,18 @@ export function PaymentsOverviewChart({ data }: PropsType) {
       axisTicks: {
         show: false,
       },
+      labels: {
+        rotate: -45,
+        rotateAlways: false,
+        hideOverlappingLabels: true,
+        ...(isMobile && { maxHeight: 60 }),
+      },
+      tickAmount: isMobile ? 4 : undefined,
     },
   };
 
   return (
-    <div className="-ml-4 -mr-5 h-[310px]">
+    <div className="h-[310px] w-full overflow-hidden sm:-ml-4 sm:-mr-5">
       <Chart
         options={options}
         series={[
@@ -100,7 +111,8 @@ export function PaymentsOverviewChart({ data }: PropsType) {
           },
         ]}
         type="area"
-        height={310}
+        width="100%"
+        height="100%"
       />
     </div>
   );