LFFE-10 complete responsive part of charts

src/components/dashboard/reports/LoanDistribution/PieChart.jsx

@@ -1,6 +1,11 @@
 import Chart from "@/core/components/Chart";
+import {useTheme} from "@mui/material/styles";
+
 
 const Pie = ({data}) => {
+    const theme = useTheme();
+    const windowsWidth = window.innerWidth;
+    console.log(windowsWidth <= theme.breakpoints.values.sm)
     const specialOption = {
         title: {
             text: undefined,
@@ -16,6 +21,9 @@ const Pie = ({data}) => {
                 fontWeight: 300,
             },
         },
+        legend: {
+            show: windowsWidth > theme.breakpoints.values.sm
+        }
     };
     const series = data.map((item) => +item.percentage)
     return (

src/components/dashboard/reports/LoanDistribution/PolarChart.jsx

@@ -1,6 +1,10 @@
 import Chart from "@/core/components/Chart";
+import {useTheme} from "@mui/material/styles";
 
 const PolarChart = ({data}) => {
+    const theme = useTheme();
+    const windowsWidth = window.innerWidth;
+    console.log(windowsWidth <= theme.breakpoints.values.sm)
     const specialOption = {
         title: {
             text: undefined,
@@ -24,6 +28,9 @@ const PolarChart = ({data}) => {
                 fontWeight: 400,
             },
         },
+        legend: {
+            show: windowsWidth > theme.breakpoints.values.sm
+        }
     };
     const series = data.map((item) => +item.percentage)
     return (