Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Graphing

/

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.

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

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

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

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
← ReferenceTooltip →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting