> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`. --- components: - rx.recharts.ScatterChart - rx.recharts.Scatter --- # Scatter Chart ```python exec import reflex as rx ``` A scatter chart always has two value axes to show one set of numerical data along a horizontal (value) axis and another set of numerical values along a vertical (value) axis. The chart displays points at the intersection of an x and y numerical value, combining these values into single data points. ## Simple Example For a scatter chart we must define an `rx.recharts.scatter()` component for each set of values we wish to plot. Each `rx.recharts.scatter()` component has a `data` prop which clearly states which data source we plot. We also must define `rx.recharts.x_axis()` and `rx.recharts.y_axis()` so that the graph knows what data to plot on each axis. ```python demo graphing data01 = [ {"x": 100, "y": 200, "z": 200}, {"x": 120, "y": 100, "z": 260}, {"x": 170, "y": 300, "z": 400}, {"x": 170, "y": 250, "z": 280}, {"x": 150, "y": 400, "z": 500}, {"x": 110, "y": 280, "z": 200}, ] def scatter_simple(): return rx.recharts.scatter_chart( rx.recharts.scatter( data=data01, fill="#8884d8", ), rx.recharts.x_axis(data_key="x", type_="number"), rx.recharts.y_axis(data_key="y"), width="100%", height=300, ) ``` ## Multiple Scatters We can also add two scatters on one chart by using two `rx.recharts.scatter()` components, and we can define an `rx.recharts.z_axis()` which represents a third column of data and is represented by the size of the dots in the scatter plot. ```python demo graphing data01 = [ {"x": 100, "y": 200, "z": 200}, {"x": 120, "y": 100, "z": 260}, {"x": 170, "y": 300, "z": 400}, {"x": 170, "y": 250, "z": 280}, {"x": 150, "y": 350, "z": 500}, {"x": 110, "y": 280, "z": 200}, ] data02 = [ {"x": 200, "y": 260, "z": 240}, {"x": 240, "y": 290, "z": 220}, {"x": 190, "y": 290, "z": 250}, {"x": 198, "y": 250, "z": 210}, {"x": 180, "y": 280, "z": 260}, {"x": 210, "y": 220, "z": 230}, ] def scatter_double(): return rx.recharts.scatter_chart( rx.recharts.scatter(data=data01, fill="#8884d8", name="A"), rx.recharts.scatter(data=data02, fill="#82ca9d", name="B"), rx.recharts.cartesian_grid(stroke_dasharray="3 3"), rx.recharts.x_axis(data_key="x", type_="number"), rx.recharts.y_axis(data_key="y"), rx.recharts.z_axis(data_key="z", range=[60, 400], name="score"), rx.recharts.legend(), rx.recharts.graphing_tooltip(), width="100%", height=300, ) ``` To learn how to use the `x_axis_id` and `y_axis_id` props, check out the Multiple Axis section of the area chart [documentation](/docs/library/graphing/charts/areachart). ## Dynamic Data Chart data tied to a State var causes the chart to automatically update when the state changes, providing a nice way to visualize data in response to user interface elements. View the "Data" tab to see the substate driving this calculation of iterations in the Collatz Conjecture for a given starting number. Enter a starting number in the box below the chart to recalculate. ```python demo exec class ScatterChartState(rx.State): data: list[dict[str, int]] = [] @rx.event def compute_collatz(self, form_data: dict) -> int: n = int(form_data.get("start") or 1) yield rx.set_value("start", "") self.data = [] for ix in range(400): self.data.append({"x": ix, "y": n}) if n == 1: break if n % 2 == 0: n = n // 2 else: n = 3 * n + 1 def scatter_dynamic(): return rx.vstack( rx.recharts.scatter_chart( rx.recharts.scatter( data=ScatterChartState.data, fill="#8884d8", ), rx.recharts.x_axis(data_key="x", type_="number"), rx.recharts.y_axis(data_key="y", type_="number"), ), rx.form.root( rx.input(placeholder="Enter a number", id="start"), rx.button("Compute", type="submit"), on_submit=ScatterChartState.compute_collatz, ), width="100%", height="15em", on_mount=ScatterChartState.compute_collatz({"start": "15"}), ) ``` ## Legend Type and Shape ```python demo exec class ScatterChartState2(rx.State): legend_types: list[str] = [ "square", "circle", "cross", "diamond", "star", "triangle", "wye", ] legend_type: str = "circle" shapes: list[str] = [ "square", "circle", "cross", "diamond", "star", "triangle", "wye", ] shape: str = "circle" data01 = [ {"x": 100, "y": 200, "z": 200}, {"x": 120, "y": 100, "z": 260}, {"x": 170, "y": 300, "z": 400}, {"x": 170, "y": 250, "z": 280}, {"x": 150, "y": 400, "z": 500}, {"x": 110, "y": 280, "z": 200}, ] @rx.event def set_shape(self, shape: str): self.shape = shape @rx.event def set_legend_type(self, legend_type: str): self.legend_type = legend_type def scatter_shape(): return rx.vstack( rx.recharts.scatter_chart( rx.recharts.scatter( data=data01, fill="#8884d8", legend_type=ScatterChartState2.legend_type, shape=ScatterChartState2.shape, ), rx.recharts.x_axis(data_key="x", type_="number"), rx.recharts.y_axis(data_key="y"), rx.recharts.legend(), width="100%", height=300, ), rx.hstack( rx.text("Legend Type: "), rx.select( ScatterChartState2.legend_types, value=ScatterChartState2.legend_type, on_change=ScatterChartState2.set_legend_type, ), rx.text("Shape: "), rx.select( ScatterChartState2.shapes, value=ScatterChartState2.shape, on_change=ScatterChartState2.set_shape, ), ), width="100%", ) ``` ## API Reference ### rx.recharts.ScatterChart A Scatter chart component in Recharts. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `width` | str, int | - | The width of chart container. String or Integer. | | `height` | str, int | - | The height of chart container. | | `margin` | dict[str, Any] | `{"top": 5, "right": 5, "bottom": 5, "left": 5}` | The sizes of whitespace around the chart. | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/ ### rx.recharts.Scatter A Scatter component in Recharts. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `data` | Sequence[dict[str, Any]] | - | The source data, in which each element is an object. | | `name` | str | - | The name of the data. It is used to represent the scatter in legend. | | `legend_type` | Literal["circle", "cross", "diamond", "line", "plainline", "rect", "square", "star", "triangle", "wye", "none"] | `"circle"` | The type of icon in legend. If set to 'none', no legend item will be rendered. 'line', 'plainline', 'square', 'rect'\| 'circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye', 'none'. | | `x_axis_id` | str, int | `0` | The id of x-axis which is corresponding to the data. | | `y_axis_id` | str, int | `0` | The id of y-axis which is corresponding to the data. | | `z_axis_id` | str, int | `0` | The id of z-axis which is corresponding to the data. | | `line` | bool | `False` | If false set, line will not be drawn. If true set, line will be drawn which have the props calculated internally. | | `shape` | Literal["square", "circle", "cross", "diamond", "star", "triangle", "wye"] | `"circle"` | If a string set, specified symbol will be used to show scatter item. 'circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye'. | | `line_type` | Literal["joint", "fitting"] | `"joint"` | If 'joint' set, line will generated by just jointing all the points. If 'fitting' set, line will be generated by fitting algorithm. 'joint', 'fitting'. | | `fill` | str, Color | `rx.color("accent", 9)` | The fill color of the scatter. | | `is_animation_active` | bool | `True in CSR, False in SSR` | If set false, animation of bar will be disabled. | | `animation_begin` | int | `0` | Specifies when the animation should begin, the unit of this option is ms. | | `animation_duration` | int | `1500` | Specifies the duration of animation, the unit of this option is ms. | | `animation_easing` | Literal["ease", "ease-in", "ease-out", "ease-in-out", "linear"] | `"ease"` | The type of easing function. | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/