Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Graphing

/

Charts

/

Scatterchart

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.

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

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.

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.

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.

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 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:

Shape:

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


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

A Scatter chart component in Recharts.

PropTypeDescriptionValues
marginDict

The sizes of whitespace around the chart.

widthUnion

The width of chart container. String or Integer

heightUnion

The height of chart container.

Valid Children

  • XAxis
  • YAxis
  • ZAxis
  • ReferenceArea
  • ReferenceDot
  • ReferenceLine
  • Brush
  • CartesianGrid
  • Legend
  • GraphingTooltip
  • Scatter

A Scatter component in Recharts.

PropTypeDescriptionValues
dataList

The source data, in which each element is an object.

legend_typeLiteral

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_idUnion

The id of x-axis which is corresponding to the data.

y_axis_idUnion

The id of y-axis which is corresponding to the data.

z_axis_idstr

The id of z-axis which is corresponding to the data.

linebool

If false set, line will not be drawn. If true set, line will be drawn which have the props calculated internally.

shapeLiteral

If a string set, specified symbol will be used to show scatter item. 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye'

line_typeLiteral

If 'joint' set, line will generated by just jointing all the points. If 'fitting' set, line will be generated by fitting algorithm. 'joint' | 'fitting'

fillUnion

The fill

nameUnion

the name

is_animation_activebool

Valid children components. If set false, animation of bar will be disabled.

animation_beginint

Specifies when the animation should begin, the unit of this option is ms, default 0.

animation_durationint

Specifies the duration of animation, the unit of this option is ms, default 1500.

animation_easingLiteral

The type of easing function, default 'ease'

Valid Children

  • LabelList
  • ErrorBar

Did you find this useful?

HomeGalleryChangelogIntroductionHosting