diff --git a/reflex/components/recharts/charts.py b/reflex/components/recharts/charts.py index bbe733244..c25107dc0 100644 --- a/reflex/components/recharts/charts.py +++ b/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), diff --git a/reflex/components/recharts/general.py b/reflex/components/recharts/general.py index 123c7708a..9a5c276b6 100644 --- a/reflex/components/recharts/general.py +++ b/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] diff --git a/reflex/components/recharts/general.pyi b/reflex/components/recharts/general.pyi index 74a65c277..eae08a5cc 100644 --- a/reflex/components/recharts/general.pyi +++ b/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.