reflex 0.5.6a2__py3-none-any.whl → 0.5.7a1__py3-none-any.whl

reflex/components/recharts/cartesian.py

@@ -31,7 +31,7 @@ from .recharts import (
 class Axis(Recharts):
     """A base class for axes in Recharts."""
 
-    # The key of a group of data which should be unique in an area chart.
+    # The key of data displayed in the axis.
     data_key: Var[Union[str, int]]
 
     # If set true, the axis do not display in the chart.
@@ -43,9 +43,6 @@ class Axis(Recharts):
     # The height of axis, which can be setted by user.
     height: Var[Union[str, int]]
 
-    # The orientation of axis 'top' | 'bottom'
-    orientation: Var[LiteralOrientationTopBottom]
-
     # The type of axis 'number' | 'category'
     type_: Var[LiteralPolarRadiusType]
 
@@ -67,6 +64,9 @@ class Axis(Recharts):
     # Reverse the ticks or not.
     reversed: Var[bool]
 
+    # The label of axis, which appears next to the axis.
+    label: Var[Union[str, int, Dict[str, Any]]]
+
     # If 'auto' set, the scale function is decided by the type of chart, and the props type. 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold' | Function
     scale: Var[LiteralScale]
 
@@ -94,6 +94,12 @@ class Axis(Recharts):
     # The minimum gap between two adjacent labels
     min_tick_gap: Var[int]
 
+    # The stroke color of axis
+    stroke: Var[Union[str, Color]]
+
+    # The text anchor of axis
+    text_anchor: Var[str]  # 'start', 'middle', 'end'
+
     # The customized event handler of click on the ticks of this axis
     on_click: EventHandler[lambda: []]
 
@@ -123,6 +129,9 @@ class XAxis(Axis):
 
     alias = "RechartsXAxis"
 
+    # The orientation of axis 'top' | 'bottom'
+    orientation: Var[LiteralOrientationTopBottom]
+
     # The id of x-axis which is corresponding to the data.
     x_axis_id: Var[Union[str, int]]
 
@@ -140,12 +149,12 @@ class YAxis(Axis):
     # 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]]
 
+    # The range of the axis. Work best in conjuction with allow_data_overflow.
+    domain: Var[List]
+
 
 class ZAxis(Recharts):
     """A ZAxis component in Recharts."""
@@ -177,9 +186,6 @@ class Brush(Recharts):
 
     alias = "RechartsBrush"
 
-    # Stroke color
-    stroke: Var[Union[str, Color]]
-
     # The key of data displayed in the axis.
     data_key: Var[Union[str, int]]
 
@@ -210,6 +216,12 @@ class Brush(Recharts):
     # The default end index of brush. If the option is not set, the end index will be 1.
     end_index: Var[int]
 
+    # The fill color of brush
+    fill: Var[Union[str, Color]]
+
+    # The stroke color of brush
+    stroke: Var[Union[str, Color]]
+
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
 
@@ -283,13 +295,13 @@ class Area(Cartesian):
     # The interpolation type of area. And customized interpolation function can be set to type. 'basis' | 'basisClosed' | 'basisOpen' | 'bumpX' | 'bumpY' | 'bump' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' |
     type_: Var[LiteralAreaType]
 
-    # If false set, dots will not be drawn. If true set, dots will be drawn which have the props calculated internally.
+    # If set false, dots will not be drawn. If set true, dots will be drawn which have the props calculated internally.
     dot: Var[bool]
 
-    # 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.
+    # The dot is shown when a user enters an area chart and this chart has a tooltip. If set false, no active dot will be drawn. If set true, an active dot will be drawn which will have the props calculated internally.
     active_dot: Var[bool]
 
-    # If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally.
+    # If set false, labels will not be drawn. If set true, 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 stack_id, then the two areas are stacked in order.
@@ -345,6 +357,9 @@ class Bar(Cartesian):
     # Max size of the bar
     max_bar_size: Var[int]
 
+    # The active bar is shown when a user enters a bar chart and this chart has tooltip. If set to false, no active bar will be drawn. If set to true, active bar will be drawn with the props calculated internally. If passed an object, active bar will be drawn, and the internally calculated props will be merged with the key value pairs of the passed object.
+    # active_bar: Var[Union[bool, Dict[str, Any]]]
+
     # Valid children components
     _valid_children: List[str] = ["Cell", "LabelList", "ErrorBar"]
 
@@ -361,7 +376,7 @@ class Bar(Cartesian):
     animation_easing: Var[LiteralAnimationEasing]
 
     # The customized event handler of animation start
-    on_animation_begin: EventHandler[lambda: []]
+    on_animation_start: EventHandler[lambda: []]
 
     # The customized event handler of animation end
     on_animation_end: EventHandler[lambda: []]
@@ -383,10 +398,10 @@ class Line(Cartesian):
     # The width of the line stroke.
     stoke_width: Var[int]
 
-    # The dot is shown when mouse enter a line 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.
+    # If set false, dots will not be drawn. If set true, dots will be drawn which have the props calculated internally.
     dot: Var[bool]
 
-    # 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.
+    # The dot is shown when a user enters an area chart and this chart has a tooltip. If set false, no active dot will be drawn. If set true, an active dot will be drawn which will have the props calculated internally.
     active_dot: Var[bool]
 
     # If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally.

reflex/components/recharts/cartesian.pyi

@@ -24,9 +24,6 @@ class Axis(Recharts):
         hide: Optional[Union[Var[bool], bool]] = None,
         width: Optional[Union[Var[Union[int, str]], str, int]] = None,
         height: Optional[Union[Var[Union[int, str]], 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,
@@ -36,6 +33,9 @@ class Axis(Recharts):
         axis_line: Optional[Union[Var[bool], bool]] = None,
         mirror: Optional[Union[Var[bool], bool]] = None,
         reversed: Optional[Union[Var[bool], bool]] = None,
+        label: Optional[
+            Union[Var[Union[Dict[str, Any], int, str]], str, int, Dict[str, Any]]
+        ] = None,
         scale: Optional[
             Union[
                 Var[
@@ -86,6 +86,8 @@ class Axis(Recharts):
         tick_line: Optional[Union[Var[bool], bool]] = None,
         tick_size: Optional[Union[Var[int], int]] = None,
         min_tick_gap: Optional[Union[Var[int], int]] = None,
+        stroke: Optional[Union[Var[Union[Color, str]], str, Color]] = None,
+        text_anchor: Optional[Union[Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -143,11 +145,10 @@ class Axis(Recharts):
 
         Args:
             *children: The children of the component.
-            data_key: The key of a group of data which should be unique in an area chart.
+            data_key: The key of data displayed in the axis.
             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.
@@ -155,6 +156,7 @@ class Axis(Recharts):
             axis_line: If set false, no axis line will be drawn. If set a object, the option is the configuration of axis line.
             mirror: If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside.
             reversed: Reverse the ticks or not.
+            label: The label of axis, which appears next to the axis.
             scale: If 'auto' set, the scale function is decided by the type of chart, and the props type. 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold' | Function
             unit: The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart.
             name: The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.
@@ -164,6 +166,8 @@ class Axis(Recharts):
             tick_line: If set false, no axis tick lines will be drawn.
             tick_size: The length of tick line.
             min_tick_gap: The minimum gap between two adjacent labels
+            stroke: The stroke color of axis
+            text_anchor: The text anchor of axis
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -183,15 +187,15 @@ class XAxis(Axis):
     def create(  # type: ignore
         cls,
         *children,
+        orientation: Optional[
+            Union[Var[Literal["top", "bottom"]], Literal["top", "bottom"]]
+        ] = None,
         x_axis_id: Optional[Union[Var[Union[int, str]], str, int]] = None,
         include_hidden: Optional[Union[Var[bool], bool]] = None,
         data_key: Optional[Union[Var[Union[int, str]], str, int]] = None,
         hide: Optional[Union[Var[bool], bool]] = None,
         width: Optional[Union[Var[Union[int, str]], str, int]] = None,
         height: Optional[Union[Var[Union[int, str]], 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,
@@ -201,6 +205,9 @@ class XAxis(Axis):
         axis_line: Optional[Union[Var[bool], bool]] = None,
         mirror: Optional[Union[Var[bool], bool]] = None,
         reversed: Optional[Union[Var[bool], bool]] = None,
+        label: Optional[
+            Union[Var[Union[Dict[str, Any], int, str]], str, int, Dict[str, Any]]
+        ] = None,
         scale: Optional[
             Union[
                 Var[
@@ -251,6 +258,8 @@ class XAxis(Axis):
         tick_line: Optional[Union[Var[bool], bool]] = None,
         tick_size: Optional[Union[Var[int], int]] = None,
         min_tick_gap: Optional[Union[Var[int], int]] = None,
+        stroke: Optional[Union[Var[Union[Color, str]], str, Color]] = None,
+        text_anchor: Optional[Union[Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -308,13 +317,13 @@ class XAxis(Axis):
 
         Args:
             *children: The children of the component.
+            orientation: The orientation of axis 'top' | 'bottom'
             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.
+            data_key: The key of data displayed in the axis.
             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.
@@ -322,6 +331,7 @@ class XAxis(Axis):
             axis_line: If set false, no axis line will be drawn. If set a object, the option is the configuration of axis line.
             mirror: If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside.
             reversed: Reverse the ticks or not.
+            label: The label of axis, which appears next to the axis.
             scale: If 'auto' set, the scale function is decided by the type of chart, and the props type. 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold' | Function
             unit: The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart.
             name: The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.
@@ -331,6 +341,8 @@ class XAxis(Axis):
             tick_line: If set false, no axis tick lines will be drawn.
             tick_size: The length of tick line.
             min_tick_gap: The minimum gap between two adjacent labels
+            stroke: The stroke color of axis
+            text_anchor: The text anchor of axis
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -353,8 +365,9 @@ class YAxis(Axis):
         orientation: Optional[
             Union[Var[Literal["left", "right"]], Literal["left", "right"]]
         ] = None,
-        data_key: Optional[Union[Var[Union[int, str]], str, int]] = None,
         y_axis_id: Optional[Union[Var[Union[int, str]], str, int]] = None,
+        domain: Optional[Union[Var[List], List]] = None,
+        data_key: Optional[Union[Var[Union[int, str]], str, int]] = None,
         hide: Optional[Union[Var[bool], bool]] = None,
         width: Optional[Union[Var[Union[int, str]], str, int]] = None,
         height: Optional[Union[Var[Union[int, str]], str, int]] = None,
@@ -367,6 +380,9 @@ class YAxis(Axis):
         axis_line: Optional[Union[Var[bool], bool]] = None,
         mirror: Optional[Union[Var[bool], bool]] = None,
         reversed: Optional[Union[Var[bool], bool]] = None,
+        label: Optional[
+            Union[Var[Union[Dict[str, Any], int, str]], str, int, Dict[str, Any]]
+        ] = None,
         scale: Optional[
             Union[
                 Var[
@@ -417,6 +433,8 @@ class YAxis(Axis):
         tick_line: Optional[Union[Var[bool], bool]] = None,
         tick_size: Optional[Union[Var[int], int]] = None,
         min_tick_gap: Optional[Union[Var[int], int]] = None,
+        stroke: Optional[Union[Var[Union[Color, str]], str, Color]] = None,
+        text_anchor: Optional[Union[Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -474,9 +492,10 @@ 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.
+            orientation: The orientation of axis 'left' | 'right'
             y_axis_id: The id of y-axis which is corresponding to the data.
+            domain: The range of the axis. Work best in conjuction with allow_data_overflow.
+            data_key: The key of data displayed in the axis.
             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.
@@ -487,6 +506,7 @@ class YAxis(Axis):
             axis_line: If set false, no axis line will be drawn. If set a object, the option is the configuration of axis line.
             mirror: If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside.
             reversed: Reverse the ticks or not.
+            label: The label of axis, which appears next to the axis.
             scale: If 'auto' set, the scale function is decided by the type of chart, and the props type. 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold' | Function
             unit: The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart.
             name: The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.
@@ -496,6 +516,8 @@ class YAxis(Axis):
             tick_line: If set false, no axis tick lines will be drawn.
             tick_size: The length of tick line.
             min_tick_gap: The minimum gap between two adjacent labels
+            stroke: The stroke color of axis
+            text_anchor: The text anchor of axis
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -641,7 +663,6 @@ class Brush(Recharts):
     def create(  # type: ignore
         cls,
         *children,
-        stroke: Optional[Union[Var[Union[Color, str]], str, Color]] = None,
         data_key: Optional[Union[Var[Union[int, str]], str, int]] = None,
         x: Optional[Union[Var[int], int]] = None,
         y: Optional[Union[Var[int], int]] = None,
@@ -652,6 +673,8 @@ class Brush(Recharts):
         gap: Optional[Union[Var[int], int]] = None,
         start_index: Optional[Union[Var[int], int]] = None,
         end_index: Optional[Union[Var[int], int]] = None,
+        fill: Optional[Union[Var[Union[Color, str]], str, Color]] = None,
+        stroke: Optional[Union[Var[Union[Color, str]], str, Color]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -667,7 +690,6 @@ class Brush(Recharts):
 
         Args:
             *children: The children of the component.
-            stroke: Stroke color
             data_key: The key of data displayed in the axis.
             x: The x-coordinate of brush.
             y: The y-coordinate of brush.
@@ -678,6 +700,8 @@ class Brush(Recharts):
             gap: The data with gap of refreshing chart. If the option is not set, the chart will be refreshed every time
             start_index: The default start index of brush. If the option is not set, the start index will be 0.
             end_index: The default end index of brush. If the option is not set, the end index will be 1.
+            fill: The fill color of brush
+            stroke: The stroke color of brush
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -970,9 +994,9 @@ class Area(Cartesian):
             stroke_width: The width of the line stroke.
             fill: The color of the area fill.
             type_: The interpolation type of area. And customized interpolation function can be set to type. 'basis' | 'basisClosed' | 'basisOpen' | 'bumpX' | 'bumpY' | 'bump' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' |
-            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.
+            dot: If set false, dots will not be drawn. If set true, dots will be drawn which have the props calculated internally.
+            active_dot: The dot is shown when a user enters an area chart and this chart has a tooltip. If set false, no active dot will be drawn. If set true, an active dot will be drawn which will have the props calculated internally.
+            label: If set false, labels will not be drawn. If set true, 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 stack_id, then the two areas are stacked in order.
             unit: The unit of data. This option will be used in tooltip.
             name: The name of data. This option will be used in tooltip and legend to represent a bar. If no value was set to this option, the value of dataKey will be used alternatively.
@@ -1067,10 +1091,10 @@ class Bar(Cartesian):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_animation_begin: Optional[
+        on_animation_end: Optional[
             Union[EventHandler, EventSpec, list, Callable, BaseVar]
         ] = None,
-        on_animation_end: Optional[
+        on_animation_start: Optional[
             Union[EventHandler, EventSpec, list, Callable, BaseVar]
         ] = None,
         on_blur: Optional[
@@ -1313,8 +1337,8 @@ class Line(Cartesian):
             type_: The interpolation type of line. And customized interpolation function can be set to type. It's the same as type in Area.
             stroke: The color of the line stroke.
             stoke_width: The width of the line stroke.
-            dot: The dot is shown when mouse enter a line 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.
-            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.
+            dot: If set false, dots will not be drawn. If set true, dots will be drawn which have the props calculated internally.
+            active_dot: The dot is shown when a user enters an area chart and this chart has a tooltip. If set false, no active dot will be drawn. If set true, an active dot will be drawn which will 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.
             hide: Hides the line when true, useful when toggling visibility state via legend.
             connect_nulls: Whether to connect a graph line across null points.

reflex/components/recharts/charts.py

@@ -105,7 +105,7 @@ class CategoricalChartBase(ChartBase):
     # The source data, in which each element is an object.
     data: Var[List[Dict[str, Any]]]
 
-    # The sizes of whitespace around the chart.
+    # The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
     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.
@@ -255,7 +255,7 @@ class PieChart(ChartBase):
 
     alias = "RechartsPieChart"
 
-    # The sizes of whitespace around the chart.
+    # The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
     margin: Var[Dict[str, Any]]
 
     # Valid children components
@@ -291,7 +291,7 @@ class RadarChart(ChartBase):
     # The source data, in which each element is an object.
     data: Var[List[Dict[str, Any]]]
 
-    # The sizes of whitespace around the chart.
+    # The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
     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
@@ -345,7 +345,7 @@ class RadialBarChart(ChartBase):
     # The source data which each element is an object.
     data: Var[List[Dict[str, Any]]]
 
-    # The sizes of whitespace around the chart.
+    # The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
     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
@@ -393,7 +393,7 @@ class ScatterChart(ChartBase):
 
     alias = "RechartsScatterChart"
 
-    # The sizes of whitespace around the chart.
+    # The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
     margin: Var[Dict[str, Any]]
 
     # Valid children components
@@ -439,7 +439,7 @@ class FunnelChart(ChartBase):
     # The layout of bars in the chart. centeric
     layout: Var[str]
 
-    # The sizes of whitespace around the chart.
+    # The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
     margin: Var[Dict[str, Any]]
 
     # Valid children components

reflex/components/recharts/charts.pyi

@@ -177,7 +177,7 @@ class CategoricalChartBase(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.
+            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             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'
@@ -289,7 +289,7 @@ class AreaChart(CategoricalChartBase):
             *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.
+            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             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'
@@ -404,7 +404,7 @@ class BarChart(CategoricalChartBase):
             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.
+            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             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'
@@ -507,7 +507,7 @@ class LineChart(CategoricalChartBase):
         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.
+            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             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'
@@ -627,7 +627,7 @@ class ComposedChart(CategoricalChartBase):
             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.
+            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             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'
@@ -713,7 +713,7 @@ class PieChart(ChartBase):
 
         Args:
             *children: The children of the chart component.
-            margin: The sizes of whitespace around the chart.
+            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             width: The width of chart container. String or Integer
             height: The height of chart container.
             style: The style of the component.
@@ -768,7 +768,7 @@ class RadarChart(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.
+            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             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.
@@ -867,7 +867,7 @@ class RadialBarChart(ChartBase):
         Args:
             *children: The children of the chart component.
             data: The source data which each element is an object.
-            margin: The sizes of whitespace around the chart.
+            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             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.
@@ -938,7 +938,7 @@ class ScatterChart(ChartBase):
 
         Args:
             *children: The children of the chart component.
-            margin: The sizes of whitespace around the chart.
+            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             width: The width of chart container. String or Integer
             height: The height of chart container.
             style: The style of the component.
@@ -1022,7 +1022,7 @@ class FunnelChart(ChartBase):
         Args:
             *children: The children of the chart component.
             layout: The layout of bars in the chart. centeric
-            margin: The sizes of whitespace around the chart.
+            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             width: The width of chart container. String or Integer
             height: The height of chart container.
             style: The style of the component.

reflex/components/recharts/general.py

@@ -5,6 +5,7 @@ from __future__ import annotations
 from typing import Any, Dict, List, Union
 
 from reflex.components.component import MemoizationLeaf
+from reflex.constants.colors import Color
 from reflex.event import EventHandler
 from reflex.vars import Var
 
@@ -215,6 +216,12 @@ class LabelList(Recharts):
     # The offset to the specified "position"
     offset: Var[int]
 
+    # The color of the line stroke.
+    stroke: Var[Union[str, Color]]
+
+    # The width of the line stroke.
+    fill: Var[Union[str, Color]]
+
 
 responsive_container = ResponsiveContainer.create
 legend = Legend.create

reflex/components/recharts/general.pyi

@@ -6,6 +6,7 @@
 from typing import Any, Callable, Dict, Literal, Optional, Union, overload
 
 from reflex.components.component import MemoizationLeaf
+from reflex.constants.colors import Color
 from reflex.event import EventHandler, EventSpec
 from reflex.style import Style
 from reflex.vars import BaseVar, Var
@@ -540,6 +541,8 @@ class LabelList(Recharts):
             ]
         ] = None,
         offset: Optional[Union[Var[int], int]] = None,
+        stroke: Optional[Union[Var[Union[Color, str]], str, Color]] = None,
+        fill: Optional[Union[Var[Union[Color, str]], str, Color]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -600,6 +603,8 @@ class LabelList(Recharts):
             data_key: The key of a group of label values in data.
             position: The position of each label relative to it view box。"Top" | "left" | "right" | "bottom" | "inside" | "outside" | "insideLeft" | "insideRight" | "insideTop" | "insideBottom" | "insideTopLeft" | "insideBottomLeft" | "insideTopRight" | "insideBottomRight" | "insideStart" | "insideEnd" | "end" | "center"
             offset: The offset to the specified "position"
+            stroke: The color of the line stroke.
+            fill: The width of the line stroke.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/recharts/recharts.py

@@ -1,8 +1,9 @@
 """A component that wraps a recharts lib."""
 
-from typing import Literal
+from typing import Dict, Literal
 
 from reflex.components.component import Component, MemoizationLeaf, NoSSRComponent
+from reflex.utils import console
 
 
 class Recharts(Component):
@@ -10,6 +11,20 @@ class Recharts(Component):
 
     library = "recharts@2.12.7"
 
+    def render(self) -> Dict:
+        """Render the tag.
+
+        Returns:
+            The rendered tag.
+        """
+        tag = super().render()
+        if any(p.startswith("css") for p in tag["props"]):
+            console.warn(
+                f"CSS props do not work for {self.__class__.__name__}. Consult docs to style it with its own prop."
+            )
+        tag["props"] = [p for p in tag["props"] if not p.startswith("css")]
+        return tag
+
 
 class RechartsCharts(NoSSRComponent, MemoizationLeaf):
     """A component that wraps a recharts lib."""

reflex/components/recharts/recharts.pyi

@@ -11,6 +11,7 @@ from reflex.style import Style
 from reflex.vars import BaseVar, Var
 
 class Recharts(Component):
+    def render(self) -> Dict: ...
     @overload
     @classmethod
     def create(  # type: ignore

reflex/config.py

@@ -277,7 +277,8 @@ class Config(Base):
             if env_var is not None:
                 if key.upper() != "DB_URL":
                     console.info(
-                        f"Overriding config value {key} with env var {key.upper()}={env_var}"
+                        f"Overriding config value {key} with env var {key.upper()}={env_var}",
+                        dedupe=True,
                     )
 
                 # Convert the env var to the expected type.