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.

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>
   );