Fix recharts min width/height (#4672)

reflex/components/recharts/charts.py

@@ -88,11 +88,13 @@ class ChartBase(RechartsCharts):
             "width": width if width is not None else "100%",
             "height": height if height is not None else "100%",
         }
-        # Provide min dimensions so the graph always appears, even if the outer container is zero-size.
-        if width is None:
-            dim_props["min_width"] = 200
-        if height is None:
-            dim_props["min_height"] = 100
+
+        # Ensure that the min_height and min_width are set to prevent the chart from collapsing.
+        # We are using small values so that height and width can still be used over min_height and min_width.
+        # Without this, sometimes the chart will not be visible. Causing confusion to the user.
+        # With this, the user will see a small chart and can adjust the height and width and can figure out that the issue is with the size.
+        dim_props["min_height"] = props.pop("min_height", 10)
+        dim_props["min_width"] = props.pop("min_width", 10)
 
         return ResponsiveContainer.create(
             super().create(*children, **props),

reflex/components/recharts/general.py

@@ -36,11 +36,11 @@ class ResponsiveContainer(Recharts, MemoizationLeaf):
     # The height of chart container. Can be a number or string. Default: "100%"
     height: Var[Union[int, str]]
 
-    # The minimum width of chart container. Number
-    min_width: Var[int]
+    # The minimum width of chart container. Number or string.
+    min_width: Var[Union[int, str]]
 
-    # The minimum height of chart container. Number
-    min_height: Var[int]
+    # The minimum height of chart container. Number or string.
+    min_height: Var[Union[int, str]]
 
     # If specified a positive number, debounced function will be used to handle the resize event. Default: 0
     debounce: Var[int]

reflex/components/recharts/general.pyi

@@ -22,8 +22,8 @@ class ResponsiveContainer(Recharts, MemoizationLeaf):
         aspect: Optional[Union[Var[int], int]] = None,
         width: Optional[Union[Var[Union[int, str]], int, str]] = None,
         height: Optional[Union[Var[Union[int, str]], int, str]] = None,
-        min_width: Optional[Union[Var[int], int]] = None,
-        min_height: Optional[Union[Var[int], int]] = None,
+        min_width: Optional[Union[Var[Union[int, str]], int, str]] = None,
+        min_height: Optional[Union[Var[Union[int, str]], int, str]] = None,
         debounce: Optional[Union[Var[int], int]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -56,8 +56,8 @@ class ResponsiveContainer(Recharts, MemoizationLeaf):
             aspect: The aspect ratio of the container. The final aspect ratio of the SVG element will be (width / height) * aspect. Number
             width: The width of chart container. Can be a number or string. Default: "100%"
             height: The height of chart container. Can be a number or string. Default: "100%"
-            min_width: The minimum width of chart container. Number
-            min_height: The minimum height of chart container. Number
+            min_width: The minimum width of chart container. Number or string.
+            min_height: The minimum height of chart container. Number or string.
             debounce: If specified a positive number, debounced function will be used to handle the resize event. Default: 0
             on_resize: If specified provides a callback providing the updated chart width and height values.
             style: The style of the component.