Fix recharts errors part 1 (#3450)

reflex/components/recharts/cartesian.py

@@ -14,7 +14,9 @@ from .recharts import (
     LiteralIfOverflow,
     LiteralInterval,
     LiteralLayout,
+    LiteralLegendType,
     LiteralLineType,
+    LiteralOrientationLeftRight,
     LiteralOrientationTopBottom,
     LiteralOrientationTopBottomLeftRight,
     LiteralPolarRadiusType,
@@ -97,6 +99,9 @@ class XAxis(Axis):
 
     alias = "RechartsXAxis"
 
+    # The id of x-axis which is corresponding to the data.
+    x_axis_id: Var[Union[str, int]]
+
     # Ensures that all datapoints within a chart contribute to its domain calculation, even when they are hidden
     include_hidden: Var[bool] = Var.create_safe(False)
 
@@ -108,9 +113,15 @@ class YAxis(Axis):
 
     alias = "RechartsYAxis"
 
+    # The orientation of axis 'left' | 'right'
+    orientation: Var[LiteralOrientationLeftRight]
+
     # The key of data displayed in the axis.
     data_key: Var[Union[str, int]]
 
+    # The id of y-axis which is corresponding to the data.
+    y_axis_id: Var[Union[str, int]]
+
 
 class ZAxis(Recharts):
     """A ZAxis component in Recharts."""
@@ -250,7 +261,7 @@ class Area(Cartesian):
     # If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally.
     label: Var[bool]
 
-    # The stack id of area, when two areas have the same value axis and same stackId, then the two areas area stacked in order.
+    # The stack id of area, when two areas have the same value axis and same stack_id, then the two areas are stacked in order.
     stack_id: Var[str]
 
     # Valid children components
@@ -279,10 +290,10 @@ class Bar(Cartesian):
     # If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally.
     label: Var[bool]
 
-    # The stack id of bar, when two areas have the same value axis and same stackId, then the two areas area stacked in order.
+    # The stack id of bar, when two bars have the same value axis and same stack_id, then the two bars are stacked in order.
     stack_id: Var[str]
 
-    # Size of the bar
+    # Size of the bar (if one bar_size is set then a bar_size must be set for all bars)
     bar_size: Var[int]
 
     # Max size of the bar
@@ -327,7 +338,7 @@ class Line(Cartesian):
     _valid_children: List[str] = ["LabelList", "ErrorBar"]
 
 
-class Scatter(Cartesian):
+class Scatter(Recharts):
     """A Scatter component in Recharts."""
 
     tag = "Scatter"
@@ -337,6 +348,15 @@ class Scatter(Cartesian):
     # The source data, in which each element is an object.
     data: Var[List[Dict[str, Any]]]
 
+    # The type of icon in legend. If set to 'none', no legend item will be rendered. 'line' | 'plainline' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'none'
+    legend_type: Var[LiteralLegendType]
+
+    # The id of x-axis which is corresponding to the data.
+    x_axis_id: Var[Union[str, int]]
+
+    # The id of y-axis which is corresponding to the data.
+    y_axis_id: Var[Union[str, int]]
+
     # The id of z-axis which is corresponding to the data.
     z_axis_id: Var[str]
 
@@ -358,8 +378,25 @@ class Scatter(Cartesian):
     # Valid children components.
     _valid_children: List[str] = ["LabelList", "ErrorBar"]
 
+    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
+        """Get the event triggers that pass the component's value to the handler.
+
+        Returns:
+            A dict mapping the event trigger to the var that is passed to the handler.
+        """
+        return {
+            EventTriggers.ON_CLICK: lambda: [],
+            EventTriggers.ON_MOUSE_MOVE: lambda: [],
+            EventTriggers.ON_MOUSE_UP: lambda: [],
+            EventTriggers.ON_MOUSE_DOWN: lambda: [],
+            EventTriggers.ON_MOUSE_OVER: lambda: [],
+            EventTriggers.ON_MOUSE_OUT: lambda: [],
+            EventTriggers.ON_MOUSE_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+        }
+
 
-class Funnel(Cartesian):
+class Funnel(Recharts):
     """A Funnel component in Recharts."""
 
     tag = "Funnel"
@@ -369,6 +406,15 @@ class Funnel(Cartesian):
     # The source data, in which each element is an object.
     data: Var[List[Dict[str, Any]]]
 
+    # The key of a group of data which should be unique in an area chart.
+    data_key: Var[Union[str, int]]
+
+    # The type of icon in legend. If set to 'none', no legend item will be rendered.
+    legend_type: Var[LiteralLegendType]
+
+    # If set false, animation of line will be disabled.
+    is_animation_active: Var[bool]
+
     # Specifies when the animation should begin, the unit of this option is ms.
     animation_begin: Var[int]
 
@@ -552,10 +598,10 @@ class CartesianGrid(Grid):
     alias = "RechartsCartesianGrid"
 
     # The horizontal line configuration.
-    horizontal: Var[Dict[str, Any]]
+    horizontal: Var[bool]
 
     # The vertical line configuration.
-    vertical: Var[Dict[str, Any]]
+    vertical: Var[bool]
 
     # The background of grid.
     fill: Var[Union[str, Color]]

reflex/components/recharts/cartesian.pyi

@@ -18,7 +18,9 @@ from .recharts import (
     LiteralIfOverflow,
     LiteralInterval,
     LiteralLayout,
+    LiteralLegendType,
     LiteralLineType,
+    LiteralOrientationLeftRight,
     LiteralOrientationTopBottom,
     LiteralOrientationTopBottomLeftRight,
     LiteralPolarRadiusType,
@@ -162,6 +164,7 @@ class XAxis(Axis):
     def create(  # type: ignore
         cls,
         *children,
+        x_axis_id: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         include_hidden: Optional[Union[Var[bool], bool]] = None,
         data_key: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         hide: Optional[Union[Var[bool], bool]] = None,
@@ -257,6 +260,7 @@ class XAxis(Axis):
 
         Args:
             *children: The children of the component.
+            x_axis_id: The id of x-axis which is corresponding to the data.
             include_hidden: Ensures that all datapoints within a chart contribute to its domain calculation, even when they are hidden
             data_key: The key of a group of data which should be unique in an area chart.
             hide: If set true, the axis do not display in the chart.
@@ -292,13 +296,14 @@ class YAxis(Axis):
     def create(  # type: ignore
         cls,
         *children,
+        orientation: Optional[
+            Union[Var[Literal["left", "right"]], Literal["left", "right"]]
+        ] = None,
         data_key: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
+        y_axis_id: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         hide: Optional[Union[Var[bool], bool]] = None,
         width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         height: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
-        orientation: Optional[
-            Union[Var[Literal["top", "bottom"]], Literal["top", "bottom"]]
-        ] = None,
         type_: Optional[
             Union[Var[Literal["number", "category"]], Literal["number", "category"]]
         ] = None,
@@ -386,11 +391,12 @@ class YAxis(Axis):
 
         Args:
             *children: The children of the component.
+            orientation: The orientation of axis 'top' | 'bottom'
             data_key: The key of a group of data which should be unique in an area chart.
+            y_axis_id: The id of y-axis which is corresponding to the data.
             hide: If set true, the axis do not display in the chart.
             width: The width of axis which is usually calculated internally.
             height: The height of axis, which can be setted by user.
-            orientation: The orientation of axis 'top' | 'bottom'
             type_: The type of axis 'number' | 'category'
             allow_decimals: Allow the ticks of XAxis to be decimals or not.
             allow_data_overflow: When domain of the axis is specified and the type of the axis is 'number', if allowDataOverflow is set to be false, the domain will be adjusted when the minimum value of data is smaller than domain[0] or the maximum value of data is greater than domain[1] so that the axis displays all data values. If set to true, graphic elements (line, area, bars) will be clipped to conform to the specified domain.
@@ -770,7 +776,7 @@ class Area(Cartesian):
             dot: If false set, dots will not be drawn. If true set, dots will be drawn which have the props calculated internally.
             active_dot: The dot is shown when user enter an area chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally.
             label: If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally.
-            stack_id: The stack id of area, when two areas have the same value axis and same stackId, then the two areas area stacked in order.
+            stack_id: The stack id of area, when two areas have the same value axis and same stack_id, then the two areas are stacked in order.
             layout: The layout of bar in the chart, usually inherited from parent. 'horizontal' | 'vertical'
             data_key: The key of a group of data which should be unique in an area chart.
             x_axis_id: The id of x-axis which is corresponding to the data.
@@ -852,8 +858,8 @@ class Bar(Cartesian):
             fill: The width of the line stroke.
             background: If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally.
             label: If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally.
-            stack_id: The stack id of bar, when two areas have the same value axis and same stackId, then the two areas area stacked in order.
-            bar_size: Size of the bar
+            stack_id: The stack id of bar, when two bars have the same value axis and same stack_id, then the two bars are stacked in order.
+            bar_size: Size of the bar (if one bar_size is set then a bar_size must be set for all bars)
             max_bar_size: Max size of the bar
             layout: The layout of bar in the chart, usually inherited from parent. 'horizontal' | 'vertical'
             data_key: The key of a group of data which should be unique in an area chart.
@@ -995,13 +1001,48 @@ class Line(Cartesian):
         """
         ...
 
-class Scatter(Cartesian):
+class Scatter(Recharts):
+    def get_event_triggers(self) -> dict[str, Union[Var, Any]]: ...
     @overload
     @classmethod
     def create(  # type: ignore
         cls,
         *children,
         data: Optional[Union[Var[List[Dict[str, Any]]], List[Dict[str, Any]]]] = None,
+        legend_type: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "line",
+                        "plainline",
+                        "square",
+                        "rect",
+                        "circle",
+                        "cross",
+                        "diamond",
+                        "star",
+                        "triangle",
+                        "wye",
+                        "none",
+                    ]
+                ],
+                Literal[
+                    "line",
+                    "plainline",
+                    "square",
+                    "rect",
+                    "circle",
+                    "cross",
+                    "diamond",
+                    "star",
+                    "triangle",
+                    "wye",
+                    "none",
+                ],
+            ]
+        ] = None,
+        x_axis_id: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
+        y_axis_id: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         z_axis_id: Optional[Union[Var[str], str]] = None,
         line: Optional[Union[Var[bool], bool]] = None,
         shape: Optional[
@@ -1027,15 +1068,6 @@ class Scatter(Cartesian):
         ] = None,
         fill: Optional[Union[Var[Union[str, Color]], Union[str, Color]]] = None,
         name: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
-        layout: Optional[
-            Union[
-                Var[Literal["horizontal", "vertical"]],
-                Literal["horizontal", "vertical"],
-            ]
-        ] = None,
-        data_key: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
-        x_axis_id: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
-        y_axis_id: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -1073,17 +1105,16 @@ class Scatter(Cartesian):
         Args:
             *children: The children of the component.
             data: The source data, in which each element is an object.
+            legend_type: The type of icon in legend. If set to 'none', no legend item will be rendered. 'line' | 'plainline' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'none'
+            x_axis_id: The id of x-axis which is corresponding to the data.
+            y_axis_id: The id of y-axis which is corresponding to the data.
             z_axis_id: The id of z-axis which is corresponding to the data.
             line: If false set, line will not be drawn. If true set, line will be drawn which have the props calculated internally.
             shape: If a string set, specified symbol will be used to show scatter item. 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye'
             line_type: If 'joint' set, line will generated by just jointing all the points. If 'fitting' set, line will be generated by fitting algorithm. 'joint' | 'fitting'
             fill: The fill
             name: the name
-            layout: The layout of bar in the chart, usually inherited from parent. 'horizontal' | 'vertical'
-            data_key: The key of a group of data which should be unique in an area chart.
-            x_axis_id: The id of x-axis which is corresponding to the data.
-            y_axis_id: The id of y-axis which is corresponding to the data.
-            style: The type of icon in legend. If set to 'none', no legend item will be rendered. 'line' | 'plainline' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye' | 'none'optional  legend_type: Var[LiteralLegendType]  The style of the component.
+            style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
@@ -1096,7 +1127,7 @@ class Scatter(Cartesian):
         """
         ...
 
-class Funnel(Cartesian):
+class Funnel(Recharts):
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]: ...
     @overload
     @classmethod
@@ -1104,6 +1135,40 @@ class Funnel(Cartesian):
         cls,
         *children,
         data: Optional[Union[Var[List[Dict[str, Any]]], List[Dict[str, Any]]]] = None,
+        data_key: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
+        legend_type: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "line",
+                        "plainline",
+                        "square",
+                        "rect",
+                        "circle",
+                        "cross",
+                        "diamond",
+                        "star",
+                        "triangle",
+                        "wye",
+                        "none",
+                    ]
+                ],
+                Literal[
+                    "line",
+                    "plainline",
+                    "square",
+                    "rect",
+                    "circle",
+                    "cross",
+                    "diamond",
+                    "star",
+                    "triangle",
+                    "wye",
+                    "none",
+                ],
+            ]
+        ] = None,
+        is_animation_active: Optional[Union[Var[bool], bool]] = None,
         animation_begin: Optional[Union[Var[int], int]] = None,
         animation_duration: Optional[Union[Var[int], int]] = None,
         animation_easing: Optional[
@@ -1112,15 +1177,6 @@ class Funnel(Cartesian):
                 Literal["ease", "ease-in", "ease-out", "ease-in-out", "linear"],
             ]
         ] = None,
-        layout: Optional[
-            Union[
-                Var[Literal["horizontal", "vertical"]],
-                Literal["horizontal", "vertical"],
-            ]
-        ] = None,
-        data_key: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
-        x_axis_id: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
-        y_axis_id: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -1158,14 +1214,13 @@ class Funnel(Cartesian):
         Args:
             *children: The children of the component.
             data: The source data, in which each element is an object.
+            data_key: The key of a group of data which should be unique in an area chart.
+            legend_type: The type of icon in legend. If set to 'none', no legend item will be rendered.
+            is_animation_active: If set false, animation of line will be disabled.
             animation_begin: Specifies when the animation should begin, the unit of this option is ms.
             animation_duration: Specifies the duration of animation, the unit of this option is ms.
             animation_easing: The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
-            layout: The layout of bar in the chart, usually inherited from parent. 'horizontal' | 'vertical'
-            data_key: The key of a group of data which should be unique in an area chart.
-            x_axis_id: The id of x-axis which is corresponding to the data.
-            y_axis_id: The id of y-axis which is corresponding to the data.
-            style: The type of icon in legend. If set to 'none', no legend item will be rendered. 'line' | 'plainline' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye' | 'none'optional  legend_type: Var[LiteralLegendType]  The style of the component.
+            style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
@@ -1714,8 +1769,8 @@ class CartesianGrid(Grid):
     def create(  # type: ignore
         cls,
         *children,
-        horizontal: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
-        vertical: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
+        horizontal: Optional[Union[Var[bool], bool]] = None,
+        vertical: Optional[Union[Var[bool], bool]] = None,
         fill: Optional[Union[Var[Union[str, Color]], Union[str, Color]]] = None,
         fill_opacity: Optional[Union[Var[float], float]] = None,
         stroke_dasharray: Optional[Union[Var[str], str]] = None,

reflex/components/recharts/charts.py

@@ -22,30 +22,12 @@ from .recharts import (
 class ChartBase(RechartsCharts):
     """A component that wraps a Recharts charts."""
 
-    # The source data, in which each element is an object.
-    data: Var[List[Dict[str, Any]]]
-
-    # If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
-    sync_id: Var[str]
-
-    # When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
-    sync_method: Var[LiteralSyncMethod]
-
     # The width of chart container. String or Integer
     width: Var[Union[str, int]] = "100%"  # type: ignore
 
     # The height of chart container.
     height: Var[Union[str, int]] = "100%"  # type: ignore
 
-    # The layout of area in the chart. 'horizontal' | 'vertical'
-    layout: Var[LiteralLayout]
-
-    # The sizes of whitespace around the chart.
-    margin: Var[Dict[str, Any]]
-
-    # The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
-    stack_offset: Var[LiteralStackOffset]
-
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
 
@@ -117,7 +99,29 @@ class ChartBase(RechartsCharts):
         )
 
 
-class AreaChart(ChartBase):
+class CategoricalChartBase(ChartBase):
+    """A component that wraps a Categorical Recharts charts."""
+
+    # The source data, in which each element is an object.
+    data: Var[List[Dict[str, Any]]]
+
+    # The sizes of whitespace around the chart.
+    margin: Var[Dict[str, Any]]
+
+    # If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
+    sync_id: Var[str]
+
+    # When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
+    sync_method: Var[LiteralSyncMethod]
+
+    # The layout of area in the chart. 'horizontal' | 'vertical'
+    layout: Var[LiteralLayout]
+
+    # The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
+    stack_offset: Var[LiteralStackOffset]
+
+
+class AreaChart(CategoricalChartBase):
     """An Area chart component in Recharts."""
 
     tag = "AreaChart"
@@ -142,7 +146,7 @@ class AreaChart(ChartBase):
     ]
 
 
-class BarChart(ChartBase):
+class BarChart(CategoricalChartBase):
     """A Bar chart component in Recharts."""
 
     tag = "BarChart"
@@ -182,7 +186,7 @@ class BarChart(ChartBase):
     ]
 
 
-class LineChart(ChartBase):
+class LineChart(CategoricalChartBase):
     """A Line chart component in Recharts."""
 
     tag = "LineChart"
@@ -204,7 +208,7 @@ class LineChart(ChartBase):
     ]
 
 
-class ComposedChart(ChartBase):
+class ComposedChart(CategoricalChartBase):
     """A Composed chart component in Recharts."""
 
     tag = "ComposedChart"
@@ -218,7 +222,7 @@ class ComposedChart(ChartBase):
     bar_category_gap: Var[Union[str, int]]  # type: ignore
 
     # The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number
-    bar_gap: Var[int]
+    bar_gap: Var[Union[str, int]]  # type: ignore
 
     # The width of all the bars in the chart. Number
     bar_size: Var[int]
@@ -250,6 +254,9 @@ class PieChart(ChartBase):
 
     alias = "RechartsPieChart"
 
+    # The sizes of whitespace around the chart.
+    margin: Var[Dict[str, Any]]
+
     # Valid children components
     _valid_children: List[str] = [
         "PolarAngleAxis",
@@ -280,6 +287,9 @@ class RadarChart(ChartBase):
 
     alias = "RechartsRadarChart"
 
+    # The sizes of whitespace around the chart.
+    margin: Var[Dict[str, Any]]
+
     # The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage
     cx: Var[Union[int, str]]
 
@@ -328,6 +338,9 @@ class RadialBarChart(ChartBase):
 
     alias = "RechartsRadialBarChart"
 
+    # The sizes of whitespace around the chart.
+    margin: Var[Dict[str, Any]]
+
     # The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage
     cx: Var[Union[int, str]]
 
@@ -385,6 +398,9 @@ class ScatterChart(ChartBase):
 
     alias = "RechartsScatterChart"
 
+    # The sizes of whitespace around the chart.
+    margin: Var[Dict[str, Any]]
+
     # Valid children components
     _valid_children: List[str] = [
         "XAxis",
@@ -418,40 +434,19 @@ class ScatterChart(ChartBase):
         }
 
 
-class FunnelChart(RechartsCharts):
+class FunnelChart(ChartBase):
     """A Funnel chart component in Recharts."""
 
     tag = "FunnelChart"
 
     alias = "RechartsFunnelChart"
 
-    # The source data, in which each element is an object.
-    data: Var[List[Dict[str, Any]]]
-
-    # If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
-    sync_id: Var[str]
-
-    # When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
-    sync_method: Var[str]
-
-    # The width of chart container. String or Integer
-    width: Var[Union[str, int]] = "100%"  # type: ignore
-
-    # The height of chart container.
-    height: Var[Union[str, int]] = "100%"  # type: ignore
-
-    # The layout of area in the chart. 'horizontal' | 'vertical'
-    layout: Var[LiteralLayout]
+    # The layout of bars in the chart. centeric
+    layout: Var[str]
 
     # The sizes of whitespace around the chart.
     margin: Var[Dict[str, Any]]
 
-    # The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
-    stack_offset: Var[LiteralStackOffset]
-
-    # The layout of bars in the chart. centeric
-    layout: Var[str]
-
     # Valid children components
     _valid_children: List[str] = ["Legend", "GraphingTooltip", "Funnel"]
 

reflex/components/recharts/charts.pyi

@@ -24,31 +24,78 @@ from .recharts import (
 
 class ChartBase(RechartsCharts):
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]: ...
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
+        height: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "ChartBase":
+        """Create a chart component.
+
+        Args:
+            *children: The children of the chart component.
+            width: The width of chart container. String or Integer
+            height: The height of chart container.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The properties of the chart component.
+
+        Returns:
+            The chart component wrapped in a responsive container.
+        """
+        ...
+
+class CategoricalChartBase(ChartBase):
     @overload
     @classmethod
     def create(  # type: ignore
         cls,
         *children,
         data: Optional[Union[Var[List[Dict[str, Any]]], List[Dict[str, Any]]]] = None,
+        margin: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
         sync_id: Optional[Union[Var[str], str]] = None,
         sync_method: Optional[
             Union[Var[Literal["index", "value"]], Literal["index", "value"]]
         ] = None,
-        width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
-        height: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         layout: Optional[
             Union[
                 Var[Literal["horizontal", "vertical"]],
                 Literal["horizontal", "vertical"],
             ]
         ] = None,
-        margin: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
         stack_offset: Optional[
             Union[
                 Var[Literal["expand", "none", "wiggle", "silhouette"]],
                 Literal["expand", "none", "wiggle", "silhouette"],
             ]
         ] = None,
+        width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
+        height: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -68,19 +115,19 @@ class ChartBase(RechartsCharts):
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
         **props
-    ) -> "ChartBase":
+    ) -> "CategoricalChartBase":
         """Create a chart component.
 
         Args:
             *children: The children of the chart component.
             data: The source data, in which each element is an object.
+            margin: The sizes of whitespace around the chart.
             sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
             sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
-            width: The width of chart container. String or Integer
-            height: The height of chart container.
             layout: The layout of area in the chart. 'horizontal' | 'vertical'
-            margin: The sizes of whitespace around the chart.
             stack_offset: The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
+            width: The width of chart container. String or Integer
+            height: The height of chart container.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -94,7 +141,7 @@ class ChartBase(RechartsCharts):
         """
         ...
 
-class AreaChart(ChartBase):
+class AreaChart(CategoricalChartBase):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -107,25 +154,25 @@ class AreaChart(ChartBase):
             ]
         ] = None,
         data: Optional[Union[Var[List[Dict[str, Any]]], List[Dict[str, Any]]]] = None,
+        margin: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
         sync_id: Optional[Union[Var[str], str]] = None,
         sync_method: Optional[
             Union[Var[Literal["index", "value"]], Literal["index", "value"]]
         ] = None,
-        width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
-        height: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         layout: Optional[
             Union[
                 Var[Literal["horizontal", "vertical"]],
                 Literal["horizontal", "vertical"],
             ]
         ] = None,
-        margin: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
         stack_offset: Optional[
             Union[
                 Var[Literal["expand", "none", "wiggle", "silhouette"]],
                 Literal["expand", "none", "wiggle", "silhouette"],
             ]
         ] = None,
+        width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
+        height: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -152,13 +199,13 @@ class AreaChart(ChartBase):
             *children: The children of the chart component.
             base_value: The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'
             data: The source data, in which each element is an object.
+            margin: The sizes of whitespace around the chart.
             sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
             sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
-            width: The width of chart container. String or Integer
-            height: The height of chart container.
             layout: The layout of area in the chart. 'horizontal' | 'vertical'
-            margin: The sizes of whitespace around the chart.
             stack_offset: The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
+            width: The width of chart container. String or Integer
+            height: The height of chart container.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -172,7 +219,7 @@ class AreaChart(ChartBase):
         """
         ...
 
-class BarChart(ChartBase):
+class BarChart(CategoricalChartBase):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -190,19 +237,19 @@ class BarChart(ChartBase):
         ] = None,
         reverse_stack_order: Optional[Union[Var[bool], bool]] = None,
         data: Optional[Union[Var[List[Dict[str, Any]]], List[Dict[str, Any]]]] = None,
+        margin: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
         sync_id: Optional[Union[Var[str], str]] = None,
         sync_method: Optional[
             Union[Var[Literal["index", "value"]], Literal["index", "value"]]
         ] = None,
-        width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
-        height: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         layout: Optional[
             Union[
                 Var[Literal["horizontal", "vertical"]],
                 Literal["horizontal", "vertical"],
             ]
         ] = None,
-        margin: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
+        width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
+        height: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -234,12 +281,12 @@ class BarChart(ChartBase):
             stack_offset: The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
             reverse_stack_order: If false set, stacked items will be rendered left to right. If true set, stacked items will be rendered right to left. (Render direction affects SVG layering, not x position.)
             data: The source data, in which each element is an object.
+            margin: The sizes of whitespace around the chart.
             sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
             sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
+            layout: The layout of area in the chart. 'horizontal' | 'vertical'
             width: The width of chart container. String or Integer
             height: The height of chart container.
-            layout: The layout of area in the chart. 'horizontal' | 'vertical'
-            margin: The sizes of whitespace around the chart.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -253,32 +300,32 @@ class BarChart(ChartBase):
         """
         ...
 
-class LineChart(ChartBase):
+class LineChart(CategoricalChartBase):
     @overload
     @classmethod
     def create(  # type: ignore
         cls,
         *children,
         data: Optional[Union[Var[List[Dict[str, Any]]], List[Dict[str, Any]]]] = None,
+        margin: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
         sync_id: Optional[Union[Var[str], str]] = None,
         sync_method: Optional[
             Union[Var[Literal["index", "value"]], Literal["index", "value"]]
         ] = None,
-        width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
-        height: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         layout: Optional[
             Union[
                 Var[Literal["horizontal", "vertical"]],
                 Literal["horizontal", "vertical"],
             ]
         ] = None,
-        margin: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
         stack_offset: Optional[
             Union[
                 Var[Literal["expand", "none", "wiggle", "silhouette"]],
                 Literal["expand", "none", "wiggle", "silhouette"],
             ]
         ] = None,
+        width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
+        height: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -304,13 +351,13 @@ class LineChart(ChartBase):
         Args:
             *children: The children of the chart component.
             data: The source data, in which each element is an object.
+            margin: The sizes of whitespace around the chart.
             sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
             sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
-            width: The width of chart container. String or Integer
-            height: The height of chart container.
             layout: The layout of area in the chart. 'horizontal' | 'vertical'
-            margin: The sizes of whitespace around the chart.
             stack_offset: The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
+            width: The width of chart container. String or Integer
+            height: The height of chart container.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -324,7 +371,7 @@ class LineChart(ChartBase):
         """
         ...
 
-class ComposedChart(ChartBase):
+class ComposedChart(CategoricalChartBase):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -337,29 +384,29 @@ class ComposedChart(ChartBase):
             ]
         ] = None,
         bar_category_gap: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
-        bar_gap: Optional[Union[Var[int], int]] = None,
+        bar_gap: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         bar_size: Optional[Union[Var[int], int]] = None,
         reverse_stack_order: Optional[Union[Var[bool], bool]] = None,
         data: Optional[Union[Var[List[Dict[str, Any]]], List[Dict[str, Any]]]] = None,
+        margin: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
         sync_id: Optional[Union[Var[str], str]] = None,
         sync_method: Optional[
             Union[Var[Literal["index", "value"]], Literal["index", "value"]]
         ] = None,
-        width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
-        height: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         layout: Optional[
             Union[
                 Var[Literal["horizontal", "vertical"]],
                 Literal["horizontal", "vertical"],
             ]
         ] = None,
-        margin: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
         stack_offset: Optional[
             Union[
                 Var[Literal["expand", "none", "wiggle", "silhouette"]],
                 Literal["expand", "none", "wiggle", "silhouette"],
             ]
         ] = None,
+        width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
+        height: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -390,13 +437,13 @@ class ComposedChart(ChartBase):
             bar_size: The width of all the bars in the chart. Number
             reverse_stack_order: If false set, stacked items will be rendered left to right. If true set, stacked items will be rendered right to left. (Render direction affects SVG layering, not x position.)
             data: The source data, in which each element is an object.
+            margin: The sizes of whitespace around the chart.
             sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
             sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
-            width: The width of chart container. String or Integer
-            height: The height of chart container.
             layout: The layout of area in the chart. 'horizontal' | 'vertical'
-            margin: The sizes of whitespace around the chart.
             stack_offset: The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
+            width: The width of chart container. String or Integer
+            height: The height of chart container.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -417,26 +464,9 @@ class PieChart(ChartBase):
     def create(  # type: ignore
         cls,
         *children,
-        data: Optional[Union[Var[List[Dict[str, Any]]], List[Dict[str, Any]]]] = None,
-        sync_id: Optional[Union[Var[str], str]] = None,
-        sync_method: Optional[
-            Union[Var[Literal["index", "value"]], Literal["index", "value"]]
-        ] = None,
+        margin: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
         width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         height: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
-        layout: Optional[
-            Union[
-                Var[Literal["horizontal", "vertical"]],
-                Literal["horizontal", "vertical"],
-            ]
-        ] = None,
-        margin: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
-        stack_offset: Optional[
-            Union[
-                Var[Literal["expand", "none", "wiggle", "silhouette"]],
-                Literal["expand", "none", "wiggle", "silhouette"],
-            ]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -458,14 +488,9 @@ class PieChart(ChartBase):
 
         Args:
             *children: The children of the chart component.
-            data: The source data, in which each element is an object.
-            sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
-            sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
+            margin: The sizes of whitespace around the chart.
             width: The width of chart container. String or Integer
             height: The height of chart container.
-            layout: The layout of area in the chart. 'horizontal' | 'vertical'
-            margin: The sizes of whitespace around the chart.
-            stack_offset: The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -486,32 +511,15 @@ class RadarChart(ChartBase):
     def create(  # type: ignore
         cls,
         *children,
+        margin: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
         cx: Optional[Union[Var[Union[int, str]], Union[int, str]]] = None,
         cy: Optional[Union[Var[Union[int, str]], Union[int, str]]] = None,
         start_angle: Optional[Union[Var[int], int]] = None,
         end_angle: Optional[Union[Var[int], int]] = None,
         inner_radius: Optional[Union[Var[Union[int, str]], Union[int, str]]] = None,
         outer_radius: Optional[Union[Var[Union[int, str]], Union[int, str]]] = None,
-        data: Optional[Union[Var[List[Dict[str, Any]]], List[Dict[str, Any]]]] = None,
-        sync_id: Optional[Union[Var[str], str]] = None,
-        sync_method: Optional[
-            Union[Var[Literal["index", "value"]], Literal["index", "value"]]
-        ] = None,
         width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         height: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
-        layout: Optional[
-            Union[
-                Var[Literal["horizontal", "vertical"]],
-                Literal["horizontal", "vertical"],
-            ]
-        ] = None,
-        margin: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
-        stack_offset: Optional[
-            Union[
-                Var[Literal["expand", "none", "wiggle", "silhouette"]],
-                Literal["expand", "none", "wiggle", "silhouette"],
-            ]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -533,20 +541,15 @@ class RadarChart(ChartBase):
 
         Args:
             *children: The children of the chart component.
+            margin: The sizes of whitespace around the chart.
             cx: The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage
             cy: The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage
             start_angle: The angle of first radial direction line.
             end_angle: The angle of last point in the circle which should be startAngle - 360 or startAngle + 360. We'll calculate the direction of chart by 'startAngle' and 'endAngle'.
             inner_radius: The inner radius of first circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage
             outer_radius: The outer radius of last circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage
-            data: The source data, in which each element is an object.
-            sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
-            sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
             width: The width of chart container. String or Integer
             height: The height of chart container.
-            layout: The layout of area in the chart. 'horizontal' | 'vertical'
-            margin: The sizes of whitespace around the chart.
-            stack_offset: The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -567,6 +570,7 @@ class RadialBarChart(ChartBase):
     def create(  # type: ignore
         cls,
         *children,
+        margin: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
         cx: Optional[Union[Var[Union[int, str]], Union[int, str]]] = None,
         cy: Optional[Union[Var[Union[int, str]], Union[int, str]]] = None,
         start_angle: Optional[Union[Var[int], int]] = None,
@@ -576,26 +580,8 @@ class RadialBarChart(ChartBase):
         bar_category_gap: Optional[Union[Var[Union[int, str]], Union[int, str]]] = None,
         bar_gap: Optional[Union[Var[str], str]] = None,
         bar_size: Optional[Union[Var[int], int]] = None,
-        data: Optional[Union[Var[List[Dict[str, Any]]], List[Dict[str, Any]]]] = None,
-        sync_id: Optional[Union[Var[str], str]] = None,
-        sync_method: Optional[
-            Union[Var[Literal["index", "value"]], Literal["index", "value"]]
-        ] = None,
         width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         height: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
-        layout: Optional[
-            Union[
-                Var[Literal["horizontal", "vertical"]],
-                Literal["horizontal", "vertical"],
-            ]
-        ] = None,
-        margin: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
-        stack_offset: Optional[
-            Union[
-                Var[Literal["expand", "none", "wiggle", "silhouette"]],
-                Literal["expand", "none", "wiggle", "silhouette"],
-            ]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -617,6 +603,7 @@ class RadialBarChart(ChartBase):
 
         Args:
             *children: The children of the chart component.
+            margin: The sizes of whitespace around the chart.
             cx: The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage
             cy: The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage
             start_angle: The angle of first radial direction line.
@@ -626,14 +613,8 @@ class RadialBarChart(ChartBase):
             bar_category_gap: The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number
             bar_gap: The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number
             bar_size: The size of each bar. If the barSize is not specified, the size of bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.
-            data: The source data, in which each element is an object.
-            sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
-            sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
             width: The width of chart container. String or Integer
             height: The height of chart container.
-            layout: The layout of area in the chart. 'horizontal' | 'vertical'
-            margin: The sizes of whitespace around the chart.
-            stack_offset: The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -654,26 +635,9 @@ class ScatterChart(ChartBase):
     def create(  # type: ignore
         cls,
         *children,
-        data: Optional[Union[Var[List[Dict[str, Any]]], List[Dict[str, Any]]]] = None,
-        sync_id: Optional[Union[Var[str], str]] = None,
-        sync_method: Optional[
-            Union[Var[Literal["index", "value"]], Literal["index", "value"]]
-        ] = None,
+        margin: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
         width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         height: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
-        layout: Optional[
-            Union[
-                Var[Literal["horizontal", "vertical"]],
-                Literal["horizontal", "vertical"],
-            ]
-        ] = None,
-        margin: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
-        stack_offset: Optional[
-            Union[
-                Var[Literal["expand", "none", "wiggle", "silhouette"]],
-                Literal["expand", "none", "wiggle", "silhouette"],
-            ]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -710,14 +674,9 @@ class ScatterChart(ChartBase):
 
         Args:
             *children: The children of the chart component.
-            data: The source data, in which each element is an object.
-            sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
-            sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
+            margin: The sizes of whitespace around the chart.
             width: The width of chart container. String or Integer
             height: The height of chart container.
-            layout: The layout of area in the chart. 'horizontal' | 'vertical'
-            margin: The sizes of whitespace around the chart.
-            stack_offset: The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -731,52 +690,25 @@ class ScatterChart(ChartBase):
         """
         ...
 
-class FunnelChart(RechartsCharts):
+class FunnelChart(ChartBase):
     @overload
     @classmethod
     def create(  # type: ignore
         cls,
         *children,
-        data: Optional[Union[Var[List[Dict[str, Any]]], List[Dict[str, Any]]]] = None,
-        sync_id: Optional[Union[Var[str], str]] = None,
-        sync_method: Optional[Union[Var[str], str]] = None,
-        width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
-        height: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         layout: Optional[Union[Var[str], str]] = None,
         margin: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
-        stack_offset: Optional[
-            Union[
-                Var[Literal["expand", "none", "wiggle", "silhouette"]],
-                Literal["expand", "none", "wiggle", "silhouette"],
-            ]
-        ] = None,
+        width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
+        height: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
-        on_context_menu: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_double_click: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_focus: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mount: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_down: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
         on_mouse_enter: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
@@ -786,45 +718,26 @@ class FunnelChart(RechartsCharts):
         on_mouse_move: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_scroll: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
         **props
     ) -> "FunnelChart":
-        """Create a new memoization leaf component.
+        """Create a chart component.
 
         Args:
-            *children: The children of the component.
-            data: The source data, in which each element is an object.
-            sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
-            sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
-            width: The width of chart container. String or Integer
-            height: The height of chart container.
+            *children: The children of the chart component.
             layout: The layout of bars in the chart. centeric
             margin: The sizes of whitespace around the chart.
-            stack_offset: The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
+            width: The width of chart container. String or Integer
+            height: The height of chart container.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
-            **props: The props of the component.
+            **props: The properties of the chart component.
 
         Returns:
-            The memoization leaf
+            The chart component wrapped in a responsive container.
         """
         ...
 

reflex/components/recharts/general.py

@@ -53,6 +53,7 @@ class ResponsiveContainer(Recharts, MemoizationLeaf):
         "ScatterChart",
         "Treemap",
         "ComposedChart",
+        "FunnelChart",
     ]
 
 

reflex/components/recharts/polar.py

@@ -9,6 +9,7 @@ from reflex.vars import Var
 from .recharts import (
     LiteralAnimationEasing,
     LiteralGridType,
+    LiteralLegendType,
     LiteralPolarRadiusType,
     LiteralScale,
     Recharts,
@@ -56,7 +57,7 @@ class Pie(Recharts):
     name_key: Var[str]
 
     # The type of icon in legend. If set to 'none', no legend item will be rendered.
-    legend_type: Var[str]
+    legend_type: Var[LiteralLegendType]
 
     # If false set, labels will not be drawn.
     label: Var[bool] = False  # type: ignore

reflex/components/recharts/polar.pyi

@@ -13,6 +13,7 @@ from reflex.vars import Var
 from .recharts import (
     LiteralAnimationEasing,
     LiteralGridType,
+    LiteralLegendType,
     LiteralPolarRadiusType,
     LiteralScale,
     Recharts,
@@ -36,7 +37,38 @@ class Pie(Recharts):
         min_angle: Optional[Union[Var[int], int]] = None,
         padding_angle: Optional[Union[Var[int], int]] = None,
         name_key: Optional[Union[Var[str], str]] = None,
-        legend_type: Optional[Union[Var[str], str]] = None,
+        legend_type: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "line",
+                        "plainline",
+                        "square",
+                        "rect",
+                        "circle",
+                        "cross",
+                        "diamond",
+                        "star",
+                        "triangle",
+                        "wye",
+                        "none",
+                    ]
+                ],
+                Literal[
+                    "line",
+                    "plainline",
+                    "square",
+                    "rect",
+                    "circle",
+                    "cross",
+                    "diamond",
+                    "star",
+                    "triangle",
+                    "wye",
+                    "none",
+                ],
+            ]
+        ] = None,
         label: Optional[Union[Var[bool], bool]] = None,
         label_line: Optional[Union[Var[bool], bool]] = None,
         fill: Optional[Union[Var[str], str]] = None,

reflex/components/recharts/recharts.py

@@ -25,6 +25,7 @@ LiteralLineType = Literal["joint", "fitting"]
 LiteralOrientation = Literal["top", "bottom", "left", "right", "middle"]
 LiteralOrientationLeftRightMiddle = Literal["left", "right", "middle"]
 LiteralOrientationTopBottom = Literal["top", "bottom"]
+LiteralOrientationLeftRight = Literal["left", "right"]
 LiteralOrientationTopBottomLeftRight = Literal["top", "bottom", "left", "right"]
 LiteralScale = Literal[
     "auto",
@@ -78,7 +79,7 @@ LiteralIconType = Literal[
     "triangle",
     "wye",
 ]
-LiteralLegendType = [
+LiteralLegendType = Literal[
     "line",
     "plainline",
     "square",

reflex/components/recharts/recharts.pyi

@@ -171,6 +171,7 @@ LiteralLineType = Literal["joint", "fitting"]
 LiteralOrientation = Literal["top", "bottom", "left", "right", "middle"]
 LiteralOrientationLeftRightMiddle = Literal["left", "right", "middle"]
 LiteralOrientationTopBottom = Literal["top", "bottom"]
+LiteralOrientationLeftRight = Literal["left", "right"]
 LiteralOrientationTopBottomLeftRight = Literal["top", "bottom", "left", "right"]
 LiteralScale = Literal[
     "auto",
@@ -224,7 +225,7 @@ LiteralIconType = Literal[
     "triangle",
     "wye",
 ]
-LiteralLegendType = [
+LiteralLegendType = Literal[
     "line",
     "plainline",
     "square",

reflex/vars.py

@@ -876,19 +876,19 @@ class Var:
                 if invoke_fn:
                     # invoke the function on left operand.
                     operation_name = (
-                        f"{left_operand_full_name}.{fn}({right_operand_full_name})"  # type: ignore
-                    )
+                        f"{left_operand_full_name}.{fn}({right_operand_full_name})"
+                    )  # type: ignore
                 else:
                     # pass the operands as arguments to the function.
                     operation_name = (
-                        f"{left_operand_full_name} {op} {right_operand_full_name}"  # type: ignore
-                    )
+                        f"{left_operand_full_name} {op} {right_operand_full_name}"
+                    )  # type: ignore
                     operation_name = f"{fn}({operation_name})"
             else:
                 # apply operator to operands (left operand <operator> right_operand)
                 operation_name = (
-                    f"{left_operand_full_name} {op} {right_operand_full_name}"  # type: ignore
-                )
+                    f"{left_operand_full_name} {op} {right_operand_full_name}"
+                )  # type: ignore
                 operation_name = format.wrap(operation_name, "(")
         else:
             # apply operator to left operand (<operator> left_operand)