Core Graphing -> Recharts (#1878)

reflex/__init__.py

@@ -14,7 +14,6 @@ from .compiler.utils import get_asset_path
 from .components import *
 from .components.base.script import client_side
 from .components.component import custom_component as memo
-from .components.graphing.victory import data as data
 from .config import Config as Config
 from .config import DBConfig as DBConfig
 from .constants import Env as Env

reflex/components/__init__.py

@@ -140,21 +140,7 @@ slider_track = SliderTrack.create
 switch = Switch.create
 text_area = TextArea.create
 upload = Upload.create
-area = Area.create
-bar = Bar.create
-box_plot = BoxPlot.create
-candlestick = Candlestick.create
-chart = Chart.create
-chart_group = ChartGroup.create
-chart_stack = ChartStack.create
-error_bar = ErrorBar.create
-histogram = Histogram.create
-line = Line.create
-pie = Pie.create
-plotly = Plotly.create
-polar = Polar.create
-scatter = Scatter.create
-voronoi = Voronoi.create
+
 box = Box.create
 center = Center.create
 circle = Circle.create
@@ -246,3 +232,44 @@ kbd = KeyboardKey.create
 color_mode_button = ColorModeButton.create
 color_mode_icon = ColorModeIcon.create
 color_mode_switch = ColorModeSwitch.create
+
+area_chart = AreaChart.create
+bar_chart = BarChart.create
+line_chart = LineChart.create
+composed_chart = ComposedChart.create
+pie_chart = PieChart.create
+radar_chart = RadarChart.create
+radial_bar_chart = RadialBarChart.create
+scatter_chart = ScatterChart.create
+funnel_chart = FunnelChart.create
+treemap = Treemap.create
+
+
+area = Area.create
+bar = Bar.create
+line = Line.create
+scatter = Scatter.create
+x_axis = XAxis.create
+y_axis = YAxis.create
+z_axis = ZAxis.create
+brush = Brush.create
+cartesian_axis = CartesianAxis.create
+cartesian_grid = CartesianGrid.create
+reference_line = ReferenceLine.create
+reference_dot = ReferenceDot.create
+reference_area = ReferenceArea.create
+error_bar = ErrorBar.create
+funnel = Funnel.create
+
+responsive_container = ResponsiveContainer.create
+legend = Legend.create
+graphing_tooltip = GraphingTooltip.create
+label = Label.create
+label_list = LabelList.create
+
+pie = Pie.create
+radar = Radar.create
+radial_bar = RadialBar.create
+polar_angle_axis = PolarAngleAxis.create
+polar_grid = PolarGrid.create
+polar_radius_axis = PolarRadiusAxis.create

reflex/components/graphing/__init__.py

@@ -1,21 +1,6 @@
 """Convenience functions to define layout components."""
 
 from .plotly import Plotly
-from .victory import (
-    Area,
-    Bar,
-    BoxPlot,
-    Candlestick,
-    Chart,
-    ChartGroup,
-    ChartStack,
-    ErrorBar,
-    Histogram,
-    Line,
-    Pie,
-    Polar,
-    Scatter,
-    Voronoi,
-)
+from .recharts import *
 
 __all__ = [f for f in dir() if f[0].isupper()]  # type: ignore

reflex/components/graphing/recharts/__init__.py

@@ -0,0 +1,41 @@
+"""Recharts components."""
+
+from .cartesian import (
+    Area,
+    Bar,
+    Brush,
+    Cartesian,
+    CartesianAxis,
+    CartesianGrid,
+    ErrorBar,
+    Funnel,
+    Line,
+    ReferenceArea,
+    ReferenceDot,
+    ReferenceLine,
+    Scatter,
+    XAxis,
+    YAxis,
+    ZAxis,
+)
+from .charts import (
+    AreaChart,
+    BarChart,
+    ComposedChart,
+    FunnelChart,
+    LineChart,
+    PieChart,
+    RadarChart,
+    RadialBarChart,
+    ScatterChart,
+    Treemap,
+)
+from .general import GraphingTooltip, Label, LabelList, Legend, ResponsiveContainer
+from .polar import (
+    Pie,
+    PolarAngleAxis,
+    PolarGrid,
+    PolarRadiusAxis,
+    Radar,
+    RadialBar,
+)

reflex/components/graphing/recharts/cartesian.py

@@ -0,0 +1,530 @@
+"""Cartesian charts in Recharts."""
+from __future__ import annotations
+
+from typing import Any, Dict, List, Union
+
+from reflex.constants import EventTriggers
+from reflex.vars import Var
+
+from .recharts import Recharts
+
+
+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.
+    data_key: Var[Union[str, int]]
+
+    # If set true, the axis do not display in the chart.
+    hide: Var[bool]
+
+    # The orientation of axis 'top' | 'bottom'
+    orientation: Var[str]
+
+    # The type of axis 'number' | 'category'
+    type_: Var[str]
+
+    # Allow the ticks of XAxis to be decimals or not.
+    allow_decimals: Var[bool]
+
+    # 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.
+    allow_data_overflow: Var[bool]
+
+    # Allow the axis has duplicated categorys or not when the type of axis is "category".
+    allow_duplicated_category: Var[bool]
+
+    # If set false, no axis line will be drawn. If set a object, the option is the configuration of axis line.
+    axis_line: Var[bool]
+
+    # If set false, no axis tick lines will be drawn. If set a object, the option is the configuration of tick lines.
+    tick_line: Var[bool]
+
+    # If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside.
+    mirror: Var[bool]
+
+    # Reverse the ticks or not.
+    reversed: Var[bool]
+
+    # 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[str]
+
+    # The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart.
+    unit: Var[Union[str, int]]
+
+    # The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.
+    name: Var[Union[str, int]]
+
+    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_OVER: lambda: [],
+            EventTriggers.ON_MOUSE_OUT: lambda: [],
+            EventTriggers.ON_MOUSE_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+        }
+
+
+class XAxis(Axis):
+    """An XAxis component in Recharts."""
+
+    tag = "XAxis"
+
+
+class YAxis(Axis):
+    """A YAxis component in Recharts."""
+
+    tag = "YAxis"
+
+    # The key of data displayed in the axis.
+    data_key: Var[Union[str, int]]
+
+
+class ZAxis(Recharts):
+    """A ZAxis component in Recharts."""
+
+    tag = "ZAxis"
+
+    # The key of data displayed in the axis.
+    data_key: Var[Union[str, int]]
+
+    # The range of axis.
+    range: Var[List[int]]
+
+    # The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart.
+    unit: Var[Union[str, int]]
+
+    # The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.
+    name: Var[Union[str, int]]
+
+    # If 'auto' set, the scale function is decided by the type of chart, and the props type.
+    scale: Var[str]
+
+
+class Brush(Recharts):
+    """A Brush component in Recharts."""
+
+    tag = "Brush"
+
+    # Stroke color
+    stroke: Var[str]
+
+    # The key of data displayed in the axis.
+    data_key: Var[Union[str, int]]
+
+    # The x-coordinate of brush.
+    x: Var[int]
+
+    # The y-coordinate of brush.
+    y: Var[int]
+
+    # The width of brush.
+    width: Var[int]
+
+    # The height of brush.
+    height: Var[int]
+
+    # The data domain of brush, [min, max].
+    data: Var[List[Any]]
+
+    # The width of each traveller.
+    traveller_width: Var[int]
+
+    # The data with gap of refreshing chart. If the option is not set, the chart will be refreshed every time
+    gap: Var[int]
+
+    # The default start index of brush. If the option is not set, the start index will be 0.
+    start_index: Var[int]
+
+    # The default end index of brush. If the option is not set, the end index will be 1.
+    end_index: Var[int]
+
+    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_CHANGE: lambda: [],
+        }
+
+
+class Cartesian(Recharts):
+    """A base class for cartesian charts in Recharts."""
+
+    # The layout of bar in the chart, usually inherited from parent. 'horizontal' | 'vertical'
+    layout: Var[str]
+
+    # The key of a group of data which should be unique in an area chart.
+    data_key: Var[Union[str, int]]
+
+    # 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 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'optional
+    legend_type: Var[str]
+
+    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_OVER: lambda: [],
+            EventTriggers.ON_MOUSE_OUT: lambda: [],
+            EventTriggers.ON_MOUSE_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+        }
+
+
+class Area(Cartesian):
+    """An Area component in Recharts."""
+
+    tag = "Area"
+
+    # The color of the line stroke.
+    stroke: Var[str]
+
+    # The width of the line stroke.
+    stroke_width: Var[int]
+
+    # The color of the area fill.
+    fill: Var[str]
+
+    # 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[str]
+
+    # If false set, dots will not be drawn. If true set, 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.
+    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.
+    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.
+    stack_id: Var[str]
+
+    # Valid children components
+    valid_children: List[str] = ["LabelList"]
+
+
+class Bar(Cartesian):
+    """A Bar component in Recharts."""
+
+    tag = "Bar"
+
+    # The color of the line stroke.
+    stroke: Var[str]
+
+    # The width of the line stroke.
+    stroke_width: Var[int]
+
+    # The width of the line stroke.
+    fill: Var[str]
+
+    # 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.
+    background: Var[bool]
+
+    # 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.
+    stack_id: Var[str]
+
+    # Size of the bar
+    bar_size: Var[int]
+
+    # Max size of the bar
+    max_bar_size: Var[int]
+
+    # Valid children components
+    valid_children: List[str] = ["Cell", "LabelList", "ErrorBar"]
+
+
+class Line(Cartesian):
+    """A Line component in Recharts."""
+
+    tag = "Line"
+
+    # The interpolation type of line. And customized interpolation function can be set to type. It's the same as type in Area.
+    type_: Var[str]
+
+    # The color of the line stroke.
+    stroke: Var[str]
+
+    # 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.
+    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.
+    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.
+    label: Var[bool]
+
+    # Hides the line when true, useful when toggling visibility state via legend.
+    hide: Var[bool]
+
+    # Whether to connect a graph line across null points.
+    connect_nulls: Var[bool]
+
+    # Valid children components
+    valid_children: List[str] = ["LabelList", "ErrorBar"]
+
+
+class Scatter(Cartesian):
+    """A Scatter component in Recharts."""
+
+    tag = "Scatter"
+
+    # The source data, in which each element is an object.
+    data: Var[List[Dict[str, Any]]]
+
+    # The id of z-axis which is corresponding to the data.
+    z_axis_id: Var[str]
+
+    # If false set, line will not be drawn. If true set, line will be drawn which have the props calculated internally.
+    line: Var[bool]
+
+    # If a string set, specified symbol will be used to show scatter item. 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye'
+    shape: Var[str]
+
+    # If 'joint' set, line will generated by just jointing all the points. If 'fitting' set, line will be generated by fitting algorithm. 'joint' | 'fitting'
+    line_type: Var[str]
+
+    # The fill
+    fill: Var[str]
+
+    # the name
+    name: Var[Union[str, int]]
+
+    # Valid children components.
+    valid_children: List[str] = ["LabelList", "ErrorBar"]
+
+
+class Funnel(Cartesian):
+    """A Funnel component in Recharts."""
+
+    tag = "Funnel"
+
+    # The source data, in which each element is an object.
+    data: Var[List[Dict[str, Any]]]
+
+    # Specifies when the animation should begin, the unit of this option is ms.
+    animation_begin: Var[int]
+
+    # Specifies the duration of animation, the unit of this option is ms.
+    animation_duration: Var[int]
+
+    # The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
+    animation_easing: Var[str]
+
+    # Valid children components
+    valid_children: List[str] = ["LabelList", "Cell"]
+
+
+class ErrorBar(Recharts):
+    """An ErrorBar component in Recharts."""
+
+    tag = "ErrorBar"
+
+    # The direction of error bar. 'x' | 'y' | 'both'
+    direction: Var[str]
+
+    # The key of a group of data which should be unique in an area chart.
+    data_key: Var[Union[str, int]]
+
+    # The width of the error bar ends.
+    width: Var[int]
+
+    # The stroke color of error bar.
+    stroke: Var[str]
+
+    # The stroke width of error bar.
+    stroke_width: Var[int]
+
+
+class Reference(Recharts):
+    """A base class for reference components in Reference."""
+
+    # 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]]
+
+    # If set a string or a number, a vertical line perpendicular to the x-axis specified by xAxisId will be drawn. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys, otherwise no line will be drawn.
+    x: Var[str]
+
+    # If set a string or a number, a horizontal line perpendicular to the y-axis specified by yAxisId will be drawn. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys, otherwise no line will be drawn.
+    y: Var[str]
+
+    # Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas.
+    if_overflow: Var[str]
+
+    # If set true, the line will be rendered in front of bars in BarChart, etc.
+    is_front: Var[bool]
+
+
+class ReferenceLine(Reference):
+    """A ReferenceLine component in Recharts."""
+
+    tag = "ReferenceLine"
+
+    # The width of the stroke.
+    stroke_width: Var[int]
+
+    # Valid children components
+    valid_children: List[str] = ["Label"]
+
+
+class ReferenceDot(Reference):
+    """A ReferenceDot component in Recharts."""
+
+    tag = "ReferenceDot"
+
+    # Valid children components
+    valid_children: List[str] = ["Label"]
+
+    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_OVER: lambda: [],
+            EventTriggers.ON_MOUSE_OUT: lambda: [],
+            EventTriggers.ON_MOUSE_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+        }
+
+
+class ReferenceArea(Recharts):
+    """A ReferenceArea component in Recharts."""
+
+    tag = "ReferenceArea"
+
+    # Stroke color
+    stroke: Var[str]
+
+    # Fill color
+    fill: Var[str]
+
+    # The opacity of area.
+    fill_opacity: Var[float]
+
+    # 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]]
+
+    # A boundary value of the area. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys. If one of x1 or x2 is invalidate, the area will cover along x-axis.
+    x1: Var[Union[str, int]]
+
+    # A boundary value of the area. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys. If one of x1 or x2 is invalidate, the area will cover along x-axis.
+    x2: Var[Union[str, int]]
+
+    # A boundary value of the area. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys. If one of y1 or y2 is invalidate, the area will cover along y-axis.
+    y1: Var[Union[str, int]]
+
+    # A boundary value of the area. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys. If one of y1 or y2 is invalidate, the area will cover along y-axis.
+    y2: Var[Union[str, int]]
+
+    # Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas.
+    if_overflow: Var[str]
+
+    # If set true, the line will be rendered in front of bars in BarChart, etc.
+    is_front: Var[bool]
+
+    # Valid children components
+    valid_children: List[str] = ["Label"]
+
+
+class Grid(Recharts):
+    """A base class for grid components in Recharts."""
+
+    # The x-coordinate of grid.
+    x: Var[int]
+
+    # The y-coordinate of grid.
+    y: Var[int]
+
+    # The width of grid.
+    width: Var[int]
+
+    # The height of grid.
+    height: Var[int]
+
+
+class CartesianGrid(Grid):
+    """A CartesianGrid component in Recharts."""
+
+    tag = "CartesianGrid"
+
+    # The horizontal line configuration.
+    horizontal: Var[Dict[str, Any]]
+
+    # The vertical line configuration.
+    vertical: Var[Dict[str, Any]]
+
+    # The background of grid.
+    fill: Var[str]
+
+    # The opacity of the background used to fill the space between grid lines
+    fill_opacity: Var[float]
+
+    # The pattern of dashes and gaps used to paint the lines of the grid
+    stroke_dasharray: Var[str]
+
+
+class CartesianAxis(Grid):
+    """A CartesianAxis component in Recharts."""
+
+    tag = "CartesianAxis"
+
+    # The orientation of axis 'top' | 'bottom' | 'left' | 'right'
+    orientation: Var[str]
+
+    # If set false, no axis line will be drawn. If set a object, the option is the configuration of axis line.
+    axis_line: Var[bool]
+
+    # If set false, no axis tick lines will be drawn. If set a object, the option is the configuration of tick lines.
+    tick_line: Var[bool]
+
+    # The length of tick line.
+    tick_size: Var[int]
+
+    # If set 0, all the ticks will be shown. If set preserveStart", "preserveEnd" or "preserveStartEnd", the ticks which is to be shown or hidden will be calculated automatically.
+    interval: Var[str]
+
+    # If set false, no ticks will be drawn.
+    ticks: Var[bool]
+
+    # If set a string or a number, default label will be drawn, and the option is content.
+    label: Var[str]
+
+    # If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside.
+    mirror: Var[bool]
+
+    # The margin between tick line and tick.
+    tick_margin: Var[int]

reflex/components/graphing/recharts/charts.py

@@ -0,0 +1,456 @@
+"""A module that defines the chart components in Recharts."""
+from __future__ import annotations
+
+from typing import Any, Dict, List, Union
+
+from reflex.components.component import Component
+from reflex.components.graphing.recharts.general import ResponsiveContainer
+from reflex.constants import EventTriggers
+from reflex.vars import Var
+
+from .recharts import RechartsCharts
+
+
+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[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[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[str]
+
+    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_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_MOVE: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+        }
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create a chart component.
+
+        Args:
+            *children: The children of the chart component.
+            **props: The properties of the chart component.
+
+        Returns:
+            The chart component wrapped in a responsive container.
+        """
+        return ResponsiveContainer.create(
+            super().create(*children, **props),
+            width=props.pop("width", "100%"),
+            height=props.pop("height", "100%"),
+        )
+
+
+class AreaChart(ChartBase):
+    """An Area chart component in Recharts."""
+
+    tag = "AreaChart"
+
+    # The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'
+    base_value: Var[Union[int, str]]
+
+    # 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.
+    stack_offset: Var[str]
+
+    # Valid children components
+    valid_children: List[str] = [
+        "XAxis",
+        "YAxis",
+        "ReferenceArea",
+        "ReferenceDot",
+        "ReferenceLine",
+        "Brush",
+        "CartesianGrid",
+        "Legend",
+        "GraphingTooltip",
+        "Area",
+    ]
+
+
+class BarChart(ChartBase):
+    """A Bar chart component in Recharts."""
+
+    tag = "BarChart"
+
+    # The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number
+    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[Union[str, int]]  # type: ignore
+
+    # The width of all the bars in the chart. Number
+    bar_size: Var[int]
+
+    # The maximum width of all the bars in a horizontal BarChart, or maximum height in a vertical BarChart.
+    max_bar_size: Var[int]
+
+    # 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.
+    stack_offset: Var[str]
+
+    # 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.)
+    reverse_stack_order: Var[bool]
+
+    # Valid children components
+    valid_children: List[str] = [
+        "XAxis",
+        "YAxis",
+        "ReferenceArea",
+        "ReferenceDot",
+        "ReferenceLine",
+        "Brush",
+        "CartesianGrid",
+        "Legend",
+        "GraphingTooltip",
+        "Bar",
+    ]
+
+
+class LineChart(ChartBase):
+    """A Line chart component in Recharts."""
+
+    tag = "LineChart"
+
+    # Valid children components
+    valid_children: List[str] = [
+        "XAxis",
+        "YAxis",
+        "ReferenceArea",
+        "ReferenceDot",
+        "ReferenceLine",
+        "Brush",
+        "CartesianGrid",
+        "Legend",
+        "GraphingTooltip",
+        "Line",
+    ]
+
+
+class ComposedChart(ChartBase):
+    """A Composed chart component in Recharts."""
+
+    tag = "ComposedChart"
+
+    # The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'
+    base_value: Var[Union[int, str]]
+
+    # The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number
+    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]
+
+    # The width of all the bars in the chart. Number
+    bar_size: Var[int]
+
+    # 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.)
+    reverse_stack_order: Var[bool]
+
+    # Valid children components
+    valid_children: List[str] = [
+        "XAxis",
+        "YAxis",
+        "ReferenceArea",
+        "ReferenceDot",
+        "ReferenceLine",
+        "Brush",
+        "CartesianGrid",
+        "Legend",
+        "GraphingTooltip",
+        "Area",
+        "Line",
+        "Bar",
+    ]
+
+
+class PieChart(ChartBase):
+    """A Pie chart component in Recharts."""
+
+    tag = "PieChart"
+
+    # Valid children components
+    valid_children: List[str] = [
+        "PolarAngleAxis",
+        "PolarRadiusAxis",
+        "PolarGrid",
+        "Legend",
+        "GraphingTooltip",
+        "Pie",
+    ]
+
+    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_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+        }
+
+
+class RadarChart(ChartBase):
+    """A Radar chart component in Recharts."""
+
+    tag = "RadarChart"
+
+    # 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]]
+
+    # The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage
+    cy: Var[Union[int, str]]
+
+    # The angle of first radial direction line.
+    start_angle: Var[int]
+
+    # 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'.
+    end_angle: Var[int]
+
+    # 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
+    inner_radius: Var[Union[int, str]]
+
+    # 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
+    outer_radius: Var[Union[int, str]]
+
+    # Valid children components
+    valid_children: List[str] = [
+        "PolarAngleAxis",
+        "PolarRadiusAxis",
+        "PolarGrid",
+        "Legend",
+        "GraphingTooltip",
+        "Radar",
+    ]
+
+    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_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_MOVE: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+        }
+
+
+class RadialBarChart(ChartBase):
+    """A RadialBar chart component in Recharts."""
+
+    tag = "RadialBarChart"
+
+    # 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]]
+
+    # The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage
+    cy: Var[Union[int, str]]
+
+    # The angle of first radial direction line.
+    start_angle: Var[int]
+
+    # 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'.
+    end_angle: Var[int]
+
+    # 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
+    inner_radius: Var[Union[int, str]]
+
+    # 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
+    outer_radius: Var[Union[int, str]]
+
+    # The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number
+    bar_category_gap: Var[Union[int, str]]
+
+    # The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number
+    bar_gap: Var[str]
+
+    # 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.
+    bar_size: Var[int]
+
+    # Valid children components
+    valid_children: List[str] = [
+        "PolarAngleAxis",
+        "PolarRadiusAxis",
+        "PolarGrid",
+        "Legend",
+        "GraphingTooltip",
+        "RadialBar",
+    ]
+
+    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_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_MOVE: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+        }
+
+
+class ScatterChart(ChartBase):
+    """A Scatter chart component in Recharts."""
+
+    tag = "ScatterChart"
+
+    # Valid children components
+    valid_children: List[str] = [
+        "XAxis",
+        "YAxis",
+        "ZAxis",
+        "ReferenceArea",
+        "ReferenceDot",
+        "ReferenceLine",
+        "Brush",
+        "CartesianGrid",
+        "Legend",
+        "GraphingTooltip",
+        "Scatter",
+    ]
+
+    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_OVER: lambda: [],
+            EventTriggers.ON_MOUSE_OUT: lambda: [],
+            EventTriggers.ON_MOUSE_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_MOVE: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+        }
+
+
+class FunnelChart(RechartsCharts):
+    """A Funnel chart component in Recharts."""
+
+    tag = "FunnelChart"
+
+    # 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[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[str]
+
+    # The layout of bars in the chart. centeric
+    layout: Var[str]
+
+    # Valid children components
+    valid_children: List[str] = ["Legend", "GraphingTooltip", "Funnel"]
+
+    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_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_MOVE: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+        }
+
+
+class Treemap(RechartsCharts):
+    """A Treemap chart component in Recharts."""
+
+    tag = "Treemap"
+
+    # 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
+
+    # data of treemap. Array
+    data: Var[List[Dict[str, Any]]]
+
+    # The key of a group of data which should be unique in a treemap. String | Number | Function
+    data_key: Var[Union[str, int]]
+
+    # The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given. Number
+    aspect_ratio: Var[int]
+
+    # If set false, animation of area 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]
+
+    # Specifies the duration of animation, the unit of this option is ms.
+    animation_duration: Var[int]
+
+    # The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
+    animation_easing: Var[str]
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create a chart component.
+
+        Args:
+            *children: The children of the chart component.
+            **props: The properties of the chart component.
+
+        Returns:
+            The Treemap component wrapped in a responsive container.
+        """
+        return ResponsiveContainer.create(
+            super().create(*children, **props),
+            width=props.pop("width", "100%"),
+            height=props.pop("height", "100%"),
+        )

reflex/components/graphing/recharts/general.py

@@ -0,0 +1,166 @@
+"""General components for Recharts."""
+from __future__ import annotations
+
+from typing import Any, Dict, List, Union
+
+from reflex.constants import EventTriggers
+from reflex.vars import Var
+
+from .recharts import Recharts
+
+
+class ResponsiveContainer(Recharts):
+    """A base class for responsive containers in Recharts."""
+
+    tag = "ResponsiveContainer"
+
+    # The aspect ratio of the container. The final aspect ratio of the SVG element will be (width / height) * aspect. Number
+    aspect: Var[int]
+
+    # The width of chart container. Can be a number or string
+    width: Var[Union[int, str]]
+
+    # The height of chart container. Number
+    height: Var[Union[int, str]]
+
+    # The minimum width of chart container.
+    min_width: Var[int]
+
+    # The minimum height of chart container. Number
+    min_height: Var[int]
+
+    # If specified a positive number, debounced function will be used to handle the resize event.
+    debounce: Var[int]
+
+    # Valid children components
+    valid_children: List[str] = [
+        "AreaChart",
+        "BarChart",
+        "LineChart",
+        "PieChart",
+        "RadarChart",
+        "RadialBarChart",
+        "ScatterChart",
+        "Treemap",
+        "ComposedChart",
+    ]
+
+
+class Legend(Recharts):
+    """A Legend component in Recharts."""
+
+    tag = "Legend"
+
+    # The width of legend container. Number
+    width: Var[int]
+
+    # The height of legend container. Number
+    height: Var[int]
+
+    # The layout of legend items. 'horizontal' | 'vertical'
+    layout: Var[str]
+
+    # The alignment of legend items in 'horizontal' direction, which can be 'left', 'center', 'right'.
+    align: Var[str]
+
+    # The alignment of legend items in 'vertical' direction, which can be 'top', 'middle', 'bottom'.
+    vertical_align: Var[str]
+
+    # The size of icon in each legend item.
+    icon_size: Var[int]
+
+    # The type of icon in each legend item. 'line' | 'plainline' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye'
+    icon_type: Var[str]
+
+    # The width of chart container, usually calculated internally.
+    chart_width: Var[int]
+
+    # The height of chart container, usually calculated internally.
+    chart_height: Var[int]
+
+    # The margin of chart container, usually calculated internally.
+    margin: Var[Dict[str, Any]]
+
+    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_OVER: lambda: [],
+            EventTriggers.ON_MOUSE_OUT: lambda: [],
+            EventTriggers.ON_MOUSE_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+        }
+
+
+class GraphingTooltip(Recharts):
+    """A Tooltip component in Recharts."""
+
+    tag = "Tooltip"
+
+    # The separator between name and value.
+    separator: Var[str]
+
+    # The offset size of tooltip. Number
+    offset: Var[int]
+
+    # When an item of the payload has value null or undefined, this item won't be displayed.
+    filter_null: Var[bool]
+
+    # If set false, no cursor will be drawn when tooltip is active.
+    cursor: Var[bool]
+
+    # The box of viewing area, which has the shape of {x: someVal, y: someVal, width: someVal, height: someVal}, usually calculated internally.
+    view_box: Var[Dict[str, Any]]
+
+    # If set true, the tooltip is displayed. If set false, the tooltip is hidden, usually calculated internally.
+    active: Var[bool]
+
+    # If this field is set, the tooltip position will be fixed and will not move anymore.
+    position: Var[Dict[str, Any]]
+
+    # The coordinate of tooltip which is usually calculated internally.
+    coordinate: Var[Dict[str, Any]]
+
+
+class Label(Recharts):
+    """A Label component in Recharts."""
+
+    tag = "Label"
+
+    # The box of viewing area, which has the shape of {x: someVal, y: someVal, width: someVal, height: someVal}, usually calculated internally.
+    view_box: Var[Dict[str, Any]]
+
+    # The value of label, which can be specified by this props or the children of <Label />
+    value: Var[str]
+
+    # The offset of label which can be specified by this props or the children of <Label />
+    offset: Var[int]
+
+    # The position of label which can be specified by this props or the children of <Label />
+    position: Var[str]
+
+
+class LabelList(Recharts):
+    """A LabelList component in Recharts."""
+
+    tag = "LabelList"
+
+    # The key of a group of label values in data.
+    data_key: Var[Union[str, int]]
+
+    # The position of each label relative to it view box。op" | "left" | "right" | "bottom" | "inside" | "outside" | "insideLeft" | "insideRight" | "insideTop" | "insideBottom" | "insideTopLeft" | "insideBottomLeft" | "insideTopRight" | "insideBottomRight" | "insideStart" | "insideEnd" | "end" | "center"
+    position: Var[str]
+
+    # The offset to the specified "position"
+    offset: Var[int]
+
+    # Color of the fill
+    fill: Var[str]
+
+    # Color of the stroke
+    stroke: Var[str]

reflex/components/graphing/recharts/polar.py

@@ -0,0 +1,306 @@
+"""Polar charts in Recharts."""
+from __future__ import annotations
+
+from typing import Any, Dict, List, Union
+
+from reflex.constants import EventTriggers
+from reflex.vars import Var
+
+from .recharts import Recharts
+
+
+class Pie(Recharts):
+    """A Pie chart component in Recharts."""
+
+    tag = "Pie"
+
+    # data
+    data: Var[List[Dict[str, Any]]]
+
+    # The key of each sector's value.
+    data_key: Var[Union[str, int]]
+
+    # The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container width.
+    cx: Var[Union[int, str]]
+
+    # The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container height.
+    cy: Var[Union[int, str]]
+
+    # The inner radius of pie, which can be set to a percent value.
+    inner_radius: Var[Union[int, str]]
+
+    # The outer radius of pie, which can be set to a percent value.
+    outer_radius: Var[Union[int, str]]
+
+    # The angle of first sector.
+    start_angle: Var[int]
+
+    # The direction of sectors. 1 means clockwise and -1 means anticlockwise.
+    end_angle: Var[int]
+
+    # The minimum angle of each unzero data.
+    min_angle: Var[int]
+
+    # The angle between two sectors.
+    padding_angle: Var[int]
+
+    # The key of each sector's name.
+    name_key: Var[str]
+
+    # The type of icon in legend. If set to 'none', no legend item will be rendered.
+    legend_type: Var[str]
+
+    # If false set, labels will not be drawn.
+    label: Var[bool] = False  # type: ignore
+
+    # If false set, label lines will not be drawn.
+    label_line: Var[bool]
+
+    # Valid children components
+    valid_children: List[str] = ["Cell", "LabelList"]
+
+    # fill color
+    fill: Var[str]
+
+    # stroke color
+    stroke: Var[str]
+
+    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_OVER: lambda: [],
+            EventTriggers.ON_MOUSE_OUT: lambda: [],
+            EventTriggers.ON_MOUSE_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+        }
+
+
+class Radar(Recharts):
+    """A Radar chart component in Recharts."""
+
+    tag = "Radar"
+
+    # The key of a group of data which should be unique in a radar chart.
+    data_key: Var[Union[str, int]]
+
+    # The coordinates of all the vertexes of the radar shape, like [{ x, y }].
+    points: Var[List[Dict[str, Any]]]
+
+    # If false set, dots will not be drawn
+    dot: Var[bool]
+
+    # Stoke color
+    stroke: Var[str]
+
+    # Fill color
+    fill: Var[str]
+
+    # opacity
+    fill_opacity: Var[float]
+
+    # The type of icon in legend. If set to 'none', no legend item will be rendered.
+    legend_type: Var[str]
+
+    # If false set, labels will not be drawn
+    label: Var[bool]
+
+    # Specifies when the animation should begin, the unit of this option is ms.
+    animation_begin: Var[int]
+
+    # Specifies the duration of animation, the unit of this option is ms.
+    animation_duration: Var[int]
+
+    # The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
+    animation_easing: Var[str]
+
+    # Valid children components
+    valid_children: List[str] = ["LabelList"]
+
+
+class RadialBar(Recharts):
+    """A RadialBar chart component in Recharts."""
+
+    tag = "RadialBar"
+
+    # The source data which each element is an object.
+    data: Var[List[Dict[str, Any]]]
+
+    # Min angle of each bar. A positive value between 0 and 360.
+    min_angle: Var[int]
+
+    # Type of legend
+    legend_type: Var[str]
+
+    # If false set, labels will not be drawn.
+    label: Var[bool]
+
+    # If false set, background sector will not be drawn.
+    background: Var[bool]
+
+    # Valid children components
+    valid_children: List[str] = ["LabelList"]
+
+    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_OVER: lambda: [],
+            EventTriggers.ON_MOUSE_OUT: lambda: [],
+            EventTriggers.ON_MOUSE_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+        }
+
+
+class PolarAngleAxis(Recharts):
+    """A PolarAngleAxis component in Recharts."""
+
+    tag = "PolarAngleAxis"
+
+    # The key of a group of data which should be unique to show the meaning of angle axis.
+    data_key: Var[Union[str, int]]
+
+    # The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container width.
+    cx: Var[Union[int, str]]
+
+    # The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container height.
+    cy: Var[Union[int, str]]
+
+    # The outer radius of 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.
+    radius: Var[Union[int, str]]
+
+    # If false set, axis line will not be drawn. If true set, axis line will be drawn which have the props calculated internally. If object set, axis line will be drawn which have the props mergered by the internal calculated props and the option.
+    axis_line: Var[Union[bool, Dict[str, Any]]]
+
+    # The type of axis line.
+    axis_line_type: Var[str]
+
+    # If false set, tick lines will not be drawn. If true set, tick lines will be drawn which have the props calculated internally. If object set, tick lines will be drawn which have the props mergered by the internal calculated props and the option.
+    tick_line: Var[Union[bool, Dict[str, Any]]]
+
+    # The width or height of tick.
+    tick: Var[Union[int, str]]
+
+    # The array of every tick's value and angle.
+    ticks: Var[List[Dict[str, Any]]]
+
+    # The orientation of axis text.
+    orient: Var[str]
+
+    # Allow the axis has duplicated categorys or not when the type of axis is "category".
+    allow_duplicated_category: Var[bool]
+
+    # Valid children components
+    valid_children: List[str] = ["Label"]
+
+    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_OVER: lambda: [],
+            EventTriggers.ON_MOUSE_OUT: lambda: [],
+            EventTriggers.ON_MOUSE_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+        }
+
+
+class PolarGrid(Recharts):
+    """A PolarGrid component in Recharts."""
+
+    tag = "PolarGrid"
+
+    # The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container width.
+    cx: Var[Union[int, str]]
+
+    # The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container height.
+    cy: Var[Union[int, str]]
+
+    # The radius of the inner polar grid.
+    inner_radius: Var[Union[int, str]]
+
+    # The radius of the outer polar grid.
+    outer_radius: Var[Union[int, str]]
+
+    # The array of every line grid's angle.
+    polar_angles: Var[List[int]]
+
+    # The array of every line grid's radius.
+    polar_radius: Var[List[int]]
+
+    # The type of polar grids. 'polygon' | 'circle'
+    grid_type: Var[str]
+
+    # Valid children components
+    valid_children: List[str] = ["RadarChart", "RadiarBarChart"]
+
+
+class PolarRadiusAxis(Recharts):
+    """A PolarRadiusAxis component in Recharts."""
+
+    tag = "PolarRadiusAxis"
+
+    # The angle of radial direction line to display axis text.
+    angle: Var[int]
+
+    # The type of axis line. 'number' | 'category'
+    type_: Var[str]
+
+    # Allow the axis has duplicated categorys or not when the type of axis is "category".
+    allow_duplicated_category: Var[bool]
+
+    # The x-coordinate of center.
+    cx: Var[Union[int, str]]
+
+    # The y-coordinate of center.
+    cy: Var[Union[int, str]]
+
+    # If set to true, the ticks of this axis are reversed.
+    reversed: Var[bool]
+
+    # The orientation of axis text.
+    orientation: Var[str]
+
+    # If false set, axis line will not be drawn. If true set, axis line will be drawn which have the props calculated internally. If object set, axis line will be drawn which have the props mergered by the internal calculated props and the option.
+    axis_line: Var[Union[bool, Dict[str, Any]]]
+
+    # The width or height of tick.
+    tick: Var[Union[int, str]]
+
+    # The count of ticks.
+    tick_count: Var[int]
+
+    # If 'auto' set, the scale funtion is linear scale. 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold'
+    scale: Var[str]
+
+    # Valid children components
+    valid_children: List[str] = ["Label"]
+
+    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_OVER: lambda: [],
+            EventTriggers.ON_MOUSE_OUT: lambda: [],
+            EventTriggers.ON_MOUSE_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+        }

reflex/components/graphing/recharts/recharts.py

@@ -0,0 +1,21 @@
+"""A component that wraps a recharts lib."""
+
+from typing import List
+
+from reflex.components.component import Component, NoSSRComponent
+
+
+class Recharts(Component):
+    """A component that wraps a victory lib."""
+
+    library = "recharts"
+
+    lib_dependencies: List[str] = ["recharts@^2.8.0"]
+
+
+class RechartsCharts(NoSSRComponent):
+    """A component that wraps a victory lib."""
+
+    library = "recharts"
+
+    lib_dependencies: List[str] = ["recharts@^2.8.0"]

reflex/components/graphing/victory.py

@@ -1,608 +0,0 @@
-"""Victory graphing components."""
-
-from typing import Any, Dict, List, Optional, Union
-
-from reflex.components.component import Component
-from reflex.style import Style
-from reflex.vars import Var
-
-
-def format_xy(x: List, y: List) -> List:
-    """Format x and y data.
-
-    Args:
-        x: The x values.
-        y: The y values.
-
-    Returns:
-        The formatted data.
-
-    Raises:
-        ValueError: If x and y are not the same length.
-    """
-    if len(x) != len(y):
-        raise ValueError("x and y must be the same length")
-    return [{"x": x[i], "y": y[i]} for i in range(len(x))]
-
-
-def format_line(x: List, y: List) -> List:
-    """Format line data.
-
-    Args:
-        x: The x values.
-        y: The y values.
-
-    Returns:
-        The formatted data.
-    """
-    return format_xy(x, y)
-
-
-def format_scatter(x: List, y: List, amount: Optional[List] = None) -> List:
-    """Format scatter data.
-
-    Args:
-        x: The x values.
-        y: The y values.
-        amount: The amount of each point.
-
-    Returns:
-        The formatted data.
-
-    Raises:
-        ValueError: If x and y are not the same length.
-    """
-    if x is None or y is None:
-        raise ValueError("x and y must be provided")
-
-    if amount is None:
-        return format_xy(x, y)
-
-    return [{"x": x[i], "y": y[i], "amount": amount[i]} for i in range(len(x))]
-
-
-def format_area(x: List, y: List, y0: Optional[List] = None) -> List:
-    """Format area data.
-
-    Args:
-        x: The x values.
-        y: The y values.
-        y0: The y0 values.
-
-    Returns:
-        The formatted data.
-
-    Raises:
-        ValueError: If x and y are not the same length.
-    """
-    if y0 is None:
-        return format_xy(x, y)
-    if len(x) != len(y) or len(x) != len(y0):
-        raise ValueError("x, y, and y0 must be the same length")
-    return [{"x": x[i], "y": y[i], "y0": y0[i]} for i in range(len(x))]
-
-
-def format_bar(x: List, y: List, y0: Optional[List] = None) -> List:
-    """Format bar data.
-
-    Args:
-        x: The x values.
-        y: The y values.
-        y0: The y0 values.
-
-    Returns:
-        The formatted data.
-
-    Raises:
-        ValueError: If x and y are not the same length.
-    """
-    if y0 is None:
-        return format_xy(x, y)
-    if len(x) != len(y) or len(x) != len(y0):
-        raise ValueError("x, y, and y0 must be the same length")
-    return [{"x": x[i], "y": y[i], "y0": y0[i]} for i in range(len(x))]
-
-
-def format_box_plot(
-    x: List,
-    y: Optional[List[Any]] = None,
-    min_: Optional[List[Any]] = None,
-    max_: Optional[List[Any]] = None,
-    median: Optional[List[Any]] = None,
-    q1: Optional[List[Any]] = None,
-    q3: Optional[List[Any]] = None,
-) -> List:
-    """Format box plot data.
-
-    Args:
-        x: The x values.
-        y: The y values.
-        min_: The minimum values.
-        max_: The maximum values.
-        median: The median values.
-        q1: The q1 values.
-        q3: The q3 values.
-
-    Returns:
-        The formatted data.
-
-    Raises:
-        ValueError: If x is not provided.
-        ValueError: If y is provided and x, y are not the same length.
-        ValueError: If y is not provided and min, max, median, q1, and q3 are not provided.
-        ValueError: If y is not provided and x, min, max, median, q1, and q3 are not the same length.
-    """
-    if x is None:
-        raise ValueError("x must be specified")
-
-    if y is not None:
-        return format_xy(x, y)
-
-    if min_ is None or max_ is None or median is None or q1 is None or q3 is None:
-        raise ValueError(
-            "min, max, median, q1, and q3 must be specified if y is not provided"
-        )
-    if (
-        len(x) != len(min_)
-        or len(x) != len(max_)
-        or len(x) != len(median)
-        or len(x) != len(q1)
-        or len(x) != len(q3)
-    ):
-        raise ValueError(
-            "x, min, max, median, q1, and q3 must be the same length and specified if y is not provided"
-        )
-    return [
-        {
-            "x": x[i],
-            "min": min_[i],
-            "max": max_[i],
-            "median": median[i],
-            "q1": q1[i],
-            "q3": q3[i],
-        }
-        for i in range(len(x))
-    ]
-
-
-def format_histogram(x: List) -> List:
-    """Format histogram data.
-
-    Args:
-        x: The x values.
-
-    Returns:
-        The formatted data.
-
-    Raises:
-        ValueError: If x is not provided.
-    """
-    if x is None:
-        raise ValueError("x must be specified")
-
-    return [{"x": x[i]} for i in range(len(x))]
-
-
-def format_pie(x: List, y: List, label: Optional[List] = None) -> List:
-    """Format pie data.
-
-    Args:
-        x: The x values.
-        y: The y values.
-        label: The label values.
-
-    Returns:
-        The formatted data.
-
-    Raises:
-        ValueError: If x is not provided.
-        ValueError: If x and y are not the same length.
-        ValueError: If x, y, and label are not the same length.
-    """
-    if x is None:
-        raise ValueError("x must be specified")
-
-    if label is None:
-        return format_xy(x, y)
-    if len(x) != len(y) or len(x) != len(label):
-        raise ValueError("x, y, and label must be the same length")
-    return [{"x": x[i], "y": y[i], "label": label[i]} for i in range(len(x))]
-
-
-def format_voronoi(x: List, y: List) -> List:
-    """Format voronoi data.
-
-    Args:
-        x: The x values.
-        y: The y values.
-
-    Returns:
-        The formatted data.
-
-    Raises:
-        ValueError: If x or y is not provided.
-        ValueError: If x and y are not the same length.
-    """
-    if x is None or y is None:
-        raise ValueError("x and y must be specified")
-
-    return format_xy(x, y)
-
-
-def format_candlestick(x: List, open: List, close: List, high: List, low: List) -> List:
-    """Format candlestick data.
-
-    Args:
-        x: The x values.
-        open: The open values.
-        close: The close values.
-        high: The high values.
-        low: The low values.
-
-    Returns:
-        The formatted data.
-
-    Raises:
-        ValueError: If x is not provided.
-        ValueError: If x, open, close, high, and low are not the same length.
-    """
-    if x is None:
-        raise ValueError("x must be specified")
-
-    if (
-        len(x) != len(open)
-        or len(x) != len(close)
-        or len(x) != len(high)
-        or len(x) != len(low)
-    ):
-        raise ValueError("x, open, close, high, and low must be the same length")
-
-    return [
-        {"x": x[i], "open": open[i], "close": close[i], "high": high[i], "low": low[i]}
-        for i in range(len(x))
-    ]
-
-
-def format_error_bar(x: List, y: List, error_x: List, error_y: List) -> List:
-    """Format error bar data.
-
-    Args:
-        x: The x values.
-        y: The y values.
-        error_x: The error_x values.
-        error_y: The error_y values.
-
-    Returns:
-        The formatted data.
-
-    Raises:
-        ValueError: If x is not provided.
-        ValueError: If x, y, error_x, and error_y are not the same length.
-    """
-    if x is None:
-        raise ValueError("x must be specified")
-
-    if len(x) != len(error_x) or len(x) != len(error_y):
-        raise ValueError("x, y, error_x, and error_y must be the same length")
-    else:
-        return [
-            {"x": x[i], "y": y[i], "errorX": error_x[i], "errorY": error_y[i]}
-            for i in range(len(x))
-        ]
-
-
-def data(graph: str, x: List, y: Optional[List] = None, **kwargs) -> List:
-    """Format data.
-
-    Args:
-        graph: The graph type.
-        x: The x values.
-        y: The y values.
-        kwargs: The keyword arguments.
-
-    Returns:
-        The formatted data.
-
-    Raises:
-        ValueError: If graph is not provided.
-        ValueError: If graph is not supported.
-    """
-    if graph == "area":
-        return format_area(x, y, **kwargs)  # type: ignore
-    elif graph == "bar":
-        return format_bar(x, y)  # type: ignore
-    elif graph == "box_plot":
-        return format_box_plot(x, y, **kwargs)
-    elif graph == "candlestick":
-        return format_candlestick(x, **kwargs)
-    elif graph == "error_bar":
-        return format_error_bar(x, y, **kwargs)  # type: ignore
-    elif graph == "histogram":
-        return format_histogram(x)
-    elif graph == "line":
-        return format_line(x, y)  # type: ignore
-    elif graph == "pie":
-        return format_pie(x, y, **kwargs)  # type: ignore
-    elif graph == "scatter":
-        return format_scatter(x, y, **kwargs)  # type: ignore
-    elif graph == "voronoi":
-        return format_voronoi(x, y)  # type: ignore
-    else:
-        raise ValueError("Invalid graph type")
-
-
-class Victory(Component):
-    """A component that wraps a victory lib."""
-
-    library = "victory@^36.6.8"
-
-    # The data to display.
-    data: Var[List[Dict]]
-
-    # The height of the chart.
-    height: Var[str]
-
-    # The width of the chart.
-    width: Var[str]
-
-    # Max domain for the chart.
-    max_domain: Var[Dict]
-
-    # Min domain for the chart.
-    min_domain: Var[Dict]
-
-    # Whether the chart is polar.
-    polar: Var[bool]
-
-    # Scale for the chart: "linear", "time", "log", "sqrt"
-    scale: Var[Dict]
-
-    # Labels for the chart.
-    labels: Var[List]
-
-    # Display the chart horizontally.
-    horizontal: Var[bool]
-
-    # Whether the chart is standalone.
-    standalone: Var[bool]
-
-    # The sort order for the chart: "ascending", "descending"
-    sort_order: Var[str]
-
-    # The padding for the chart.
-    padding: Var[Dict]
-
-    # Domain padding for the chart.
-    domain_padding: Var[Dict]
-
-    # A custom style for the code block.
-    custom_style: Var[Dict[str, str]]
-
-    @classmethod
-    def create(cls, *children, **props):
-        """Create a chart component.
-
-        Args:
-            *children: The children of the component.
-            **props: The props to pass to the component.
-
-        Returns:
-            The chart component.
-        """
-        # This component handles style in a special prop.
-        custom_style = props.pop("style", {})
-
-        # Transfer style props to the custom style prop.
-        for key, value in props.items():
-            if key not in cls.get_fields():
-                custom_style[key] = value
-
-        # Create the component.
-        return super().create(
-            *children,
-            **props,
-            custom_style=Style(custom_style),
-        )
-
-    def _add_style(self, style):
-        self.custom_style = self.custom_style or {}
-        self.custom_style.update(style)  # type: ignore
-
-    def _render(self):
-        out = super()._render()
-        return out.add_props(style=self.custom_style).remove_props("custom_style")
-
-
-class Chart(Victory):
-    """Wrapper component that renders a given set of children on a set of Cartesian or polar axes."""
-
-    tag = "VictoryChart"
-
-    # Start angle for the chart.
-    start_angle: Var[int]
-
-    # End angle for the chart.
-    end_angle: Var[int]
-
-    # The padding for the chart.
-    domain_padding: Var[Dict]
-
-
-class Line(Victory):
-    """Display a victory line."""
-
-    tag = "VictoryLine"
-
-    # Interpolation for the line: Polar line charts may use the following interpolation options: "basis", "cardinal", "catmullRom", "linear" and Cartesian line charts may use the following interpolation options: "basis", "bundle", "cardinal", "catmullRom", "linear", "monotoneX", "monotoneY", "natural", "step", "stepAfter", "stepBefore"
-    interpolation: Var[str]
-
-
-class Bar(Victory):
-    """Display a victory bar."""
-
-    tag = "VictoryBar"
-
-    # The alignment prop specifies how bars should be aligned relative to their data points. This prop may be given as "start", "middle" or "end". When this prop is not specified, bars will have "middle" alignment relative to their data points.
-    alignment: Var[str]
-
-    # Determines the relative width of bars to the available space. This prop should be given as a number between 0 and 1. When this prop is not specified, bars will have a default ratio of 0.75.
-    bar_ratio: Var[float]
-
-    # Specify the width of each bar.
-    bar_width: Var[int]
-
-    # Specifies a radius to apply to each bar.
-    corner_radius: Var[float]
-
-
-class Area(Victory):
-    """Display a victory area."""
-
-    tag = "VictoryArea"
-
-    # Interpolation for the line: Polar line charts may use the following interpolation options: "basis", "cardinal", "catmullRom", "linear" and Cartesian line charts may use the following interpolation options: "basis", "bundle", "cardinal", "catmullRom", "linear", "monotoneX", "monotoneY", "natural", "step", "stepAfter", "stepBefore"
-    interpolation: Var[str]
-
-
-class Pie(Victory):
-    """Display a victory pie."""
-
-    tag = "VictoryPie"
-
-    # Defines a color scale to be applied to each slice. Takes in an array of colors. Default color scale are: "grayscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue".
-    color_scale: Var[Union[str, List[str]]]
-
-    # Specifies the corner radius of the slices rendered in the pie chart.
-    corner_radius: Var[float]
-
-    # Specifies the angular placement of each label relative to the angle of its corresponding slice. Options are : "parallel", "perpendicular", "vertical".
-    label_placement: Var[str]
-
-    # Specifies the position of each label relative to its corresponding slice. Options are : "startAngle", "endAngle", "centroid".
-    label_position: Var[str]
-
-    # Defines the radius of the arc that will be used for positioning each slice label. This prop should be given as a number between 0 and 1. If this prop is not set, the label radius will default to the radius of the pie + label padding.
-    label_radius: Var[float]
-
-    # Defines the amount of separation between adjacent data slices in number of degrees.
-    pad_angle: Var[float]
-
-    # Specifies the radius of the pie. When this prop is not given, it will be calculated based on the width, height, and padding props.
-    radius: Var[float]
-
-    # Specifies the inner radius of the pie. When this prop is not given, it will default to 0.
-    inner_radius: Var[float]
-
-    # Specifies the start angle of the first slice in number of degrees. Default is 0.
-    start_angle: Var[float]
-
-    # Specifies the end angle of the last slice in number of degrees. Default is 360.
-    end_angle: Var[float]
-
-
-class Candlestick(Victory):
-    """Display a victory candlestick."""
-
-    tag = "VictoryCandlestick"
-
-    # Candle colors are significant in candlestick charts, with colors indicating whether a market closed higher than it opened (positive), or closed lower than it opened (negative). The candleColors prop should be given as an object with color strings specified for positive and negative.
-    candle_colors: Var[Dict]
-
-    # Specifies an approximate ratio between candle widths and spaces between candles.
-    candle_ratio: Var[float]
-
-    # Specify the width of each candle.
-    candle_width: Var[float]
-
-    # Defines the labels that will correspond to the close value for each candle.
-    close_labels: Var[List]
-
-
-class Scatter(Victory):
-    """Display a victory scatter."""
-
-    tag = "VictoryScatter"
-
-    # Indicates which property of the data object should be used to scale data points in a bubble chart.
-    bubble_property: Var[str]
-
-    # Sets a lower limit for scaling data points in a bubble chart.
-    min_bubble_size: Var[float]
-
-    # Sets an upper limit for scaling data points in a bubble chart.
-    max_bubble_size: Var[float]
-
-
-class BoxPlot(Victory):
-    """Display a victory boxplot."""
-
-    tag = "VictoryBoxPlot"
-
-    # Specifies how wide each box should be.
-    box_width: Var[float]
-
-
-class Histogram(Victory):
-    """Display a victory histogram."""
-
-    tag = "VictoryHistogram"
-
-    # Specify how the data will be binned.
-    bins: Var[List]
-
-    # Specifies the amount of space between each bin.
-    bin_spacing: Var[float]
-
-    # Specifies a radius to apply to each bar.
-    corner_radius: Var[float]
-
-
-class ErrorBar(Victory):
-    """Display a victory errorbar."""
-
-    tag = "VictoryErrorBar"
-
-    # Sets the border width of the error bars.
-    border_width: Var[float]
-
-
-class ChartGroup(Victory):
-    """Display a victory group."""
-
-    tag = "VictoryGroup"
-
-    # Optional prop that defines a color scale to be applied to the children of the group. Takes in an array of colors. Default color scale are: "grayscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue".
-    color_scale: Var[Union[str, List[str]]]
-
-    # Optional prop that defines a single color to be applied to the children of the group. Overrides color_scale.
-    color: Var[str]
-
-    # Determines the number of pixels each element in a group should be offset from its original position on the independent axis.
-    offset: Var[float]
-
-
-class ChartStack(Victory):
-    """Display a victory stack."""
-
-    tag = "VictoryStack"
-
-    # Prop is used for grouping stacks of bars.
-    categories: Var[int]
-
-    # Optional prop that defines a color scale to be applied to the children of the group. Takes in an array of colors. Default color scale are: "grayscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue".
-    color_scale: Var[Union[str, List[str]]]
-
-
-class Voronoi(Victory):
-    """Display a victory Voronoi."""
-
-    tag = "VictoryVoronoi"
-
-
-class Polar(Victory):
-    """Display a victory polar."""
-
-    tag = "VictoryPolarAxis"
-
-    # Specifies whether the axis corresponds to the dependent variable
-    dependent_axis: Var[bool]

tests/components/graphing/test_victory_data.py

@@ -1,153 +0,0 @@
-from reflex import data
-
-# Test data.
-x_num = [1, 2, 3, 4, 5]
-x_str = ["Cats", "Dogs", "Birds", "Fish", "Reptiles"]
-y = [1, 2, 3, 4, 10]
-y1 = [5, 12, 4, 6, 1]
-y2 = [
-    [1, 5, 7, 4, 10, 14],
-    [1, 2, 3, 4, 10],
-    [1, 2, 3, 4, 5],
-    [1, 7, 3, 14, 10],
-    [1, 2, 6, 4, 10],
-]
-amount = [1, 5, 3, 14, 1]
-
-
-def test_line():
-    output = data(graph="line", x=x_num, y=y)
-    expected = [
-        {"x": 1, "y": 1},
-        {"x": 2, "y": 2},
-        {"x": 3, "y": 3},
-        {"x": 4, "y": 4},
-        {"x": 5, "y": 10},
-    ]
-    assert output == expected
-
-
-def test_scatter():
-    output = data(graph="scatter", x=x_num, y=y)
-    expected = [
-        {"x": 1, "y": 1},
-        {"x": 2, "y": 2},
-        {"x": 3, "y": 3},
-        {"x": 4, "y": 4},
-        {"x": 5, "y": 10},
-    ]
-    assert output == expected
-
-
-def test_area():
-    output = data(graph="area", x=x_num, y=y)
-    expected = [
-        {"x": 1, "y": 1},
-        {"x": 2, "y": 2},
-        {"x": 3, "y": 3},
-        {"x": 4, "y": 4},
-        {"x": 5, "y": 10},
-    ]
-    assert output == expected
-
-
-def test_bar():
-    output = data(graph="bar", x=x_str, y=y)
-    expected = [
-        {"x": "Cats", "y": 1},
-        {"x": "Dogs", "y": 2},
-        {"x": "Birds", "y": 3},
-        {"x": "Fish", "y": 4},
-        {"x": "Reptiles", "y": 10},
-    ]
-    assert output == expected
-
-
-def test_box_plot():
-    output = data(graph="box_plot", x=x_num, y=y2)
-    expected = [
-        {"x": 1, "y": [1, 5, 7, 4, 10, 14]},
-        {"x": 2, "y": [1, 2, 3, 4, 10]},
-        {"x": 3, "y": [1, 2, 3, 4, 5]},
-        {"x": 4, "y": [1, 7, 3, 14, 10]},
-        {"x": 5, "y": [1, 2, 6, 4, 10]},
-    ]
-    output_specified = data(
-        graph="box_plot", x=x_num, min_=y1, max_=y1, median=y1, q1=y1, q3=y1
-    )
-    expected_specified = [
-        {"x": 1, "min": 5, "max": 5, "median": 5, "q1": 5, "q3": 5},
-        {"x": 2, "min": 12, "max": 12, "median": 12, "q1": 12, "q3": 12},
-        {"x": 3, "min": 4, "max": 4, "median": 4, "q1": 4, "q3": 4},
-        {"x": 4, "min": 6, "max": 6, "median": 6, "q1": 6, "q3": 6},
-        {"x": 5, "min": 1, "max": 1, "median": 1, "q1": 1, "q3": 1},
-    ]
-    assert output == expected
-    assert output_specified == expected_specified
-
-
-def test_histogram():
-    output = data(graph="histogram", x=x_num)
-    output2 = data(graph="histogram", x=y1)
-    expected = [{"x": 1}, {"x": 2}, {"x": 3}, {"x": 4}, {"x": 5}]
-    expected2 = [{"x": 5}, {"x": 12}, {"x": 4}, {"x": 6}, {"x": 1}]
-    assert output == expected
-    assert output2 == expected2
-
-
-def test_pie():
-    output = data(graph="pie", x=x_str, y=amount)
-    expected = [
-        {"x": "Cats", "y": 1},
-        {"x": "Dogs", "y": 5},
-        {"x": "Birds", "y": 3},
-        {"x": "Fish", "y": 14},
-        {"x": "Reptiles", "y": 1},
-    ]
-    output_labels = data(graph="pie", x=x_str, y=amount, label=x_str)
-    expected_labels = [
-        {"x": "Cats", "y": 1, "label": "Cats"},
-        {"x": "Dogs", "y": 5, "label": "Dogs"},
-        {"x": "Birds", "y": 3, "label": "Birds"},
-        {"x": "Fish", "y": 14, "label": "Fish"},
-        {"x": "Reptiles", "y": 1, "label": "Reptiles"},
-    ]
-    assert output == expected
-    assert output_labels == expected_labels
-
-
-def test_voronoi():
-    output = data(graph="voronoi", x=x_num, y=y)
-    expected = [
-        {"x": 1, "y": 1},
-        {"x": 2, "y": 2},
-        {"x": 3, "y": 3},
-        {"x": 4, "y": 4},
-        {"x": 5, "y": 10},
-    ]
-    assert output == expected
-
-
-def test_candlestick():
-    output = data(graph="candlestick", x=x_num, open=y1, high=y1, low=y1, close=y1)
-    expected = [
-        {"x": 1, "open": 5, "high": 5, "low": 5, "close": 5},
-        {"x": 2, "open": 12, "high": 12, "low": 12, "close": 12},
-        {"x": 3, "open": 4, "high": 4, "low": 4, "close": 4},
-        {"x": 4, "open": 6, "high": 6, "low": 6, "close": 6},
-        {"x": 5, "open": 1, "high": 1, "low": 1, "close": 1},
-    ]
-
-    assert output == expected
-
-
-def test_errorbar():
-    output = data(graph="error_bar", x=x_num, y=y1, error_y=y1, error_x=y1)
-    expected = [
-        {"x": 1, "y": 5, "errorY": 5, "errorX": 5},
-        {"x": 2, "y": 12, "errorY": 12, "errorX": 12},
-        {"x": 3, "y": 4, "errorY": 4, "errorX": 4},
-        {"x": 4, "y": 6, "errorY": 6, "errorX": 6},
-        {"x": 5, "y": 1, "errorY": 1, "errorX": 1},
-    ]
-    assert output == expected