Scatter Chart

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.

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.

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"),
)

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},
]

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.

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(),
)

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},
] & 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},
]

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.

def index():
    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"}
        ),
    )

class ScatterChartState(rx.State):
    data: list[dict[str, int]] = []

    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 index():
    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"}
        ),
    )

API Reference

ScatterChart

A Scatter chart component in Recharts.

Prop	Type	Description
`data`	List	The source data, in which each element is an object.
`sync_id`	str	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`	Literal	When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' \| 'value' \| function
`width`	Union	The width of chart container. String or Integer
`height`	Union	The height of chart container.
`layout`	Literal	The layout of area in the chart. 'horizontal' \| 'vertical'
`margin`	Dict	The sizes of whitespace around the chart.
`stack_offset`	Literal	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'

Valid Children

XAxis
YAxis
ZAxis
ReferenceArea
ReferenceDot
ReferenceLine
Brush
CartesianGrid
Legend
GraphingTooltip
Scatter

Event Triggers

See the full list of default event triggers

Scatter

A Scatter component in Recharts.

Prop	Type	Description
`data`	List	The source data, in which each element is an object.
`z_axis_id`	str	The id of z-axis which is corresponding to the data.
`line`	bool	If false set, line will not be drawn. If true set, line will be drawn which have the props calculated internally.
`shape`	Literal	If a string set, specified symbol will be used to show scatter item. 'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'
`line_type`	Literal	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	The fill
`name`	Union	the name
`layout`	Literal	The layout of bar in the chart, usually inherited from parent. 'horizontal' \| 'vertical'
`data_key`	Union	The key of a group of data which should be unique in an area chart.
`x_axis_id`	Union	The id of x-axis which is corresponding to the data.
`y_axis_id`	Union	The id of y-axis which is corresponding to the data.

Valid Children

LabelList
ErrorBar

Event Triggers

See the full list of default event triggers

← Reference Tooltip →

Did you find this useful?

Yes

Raise an issue

Edit this page

Home Gallery Changelog Introduction Hosting

Scatter Chart

Dynamic Data

API Reference

ScatterChart

Scatter