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.

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.

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.

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.

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.

Legend Type and Shape

Legend Type:

Shape:

API Reference

rx.recharts.ScatterChart

A Scatter chart component in Recharts.

PropType | ValuesDefault
margin
Dict[str, Any]
{"top": 5, "right": 5, "bottom": 5, "left": 5}
width
Union[str, int]
"100%"
height
Union[str, int]
"100%"

Valid Children

XAxisYAxisZAxisReferenceAreaReferenceDotReferenceLineBrushCartesianGridLegendGraphingTooltipScatter

rx.recharts.Scatter

A Scatter component in Recharts.

PropType | ValuesDefault
data
List
legend_type
"line" | "plainline" | ...
"circle"
x_axis_id
Union[str, int]
0
y_axis_id
Union[str, int]
0
z_axis_id
Union[str, int]
0
line
bool
False
shape
"square" | "circle" | ...
"circle"
line_type
"joint" | "fitting"
"joint"
fill
Union[str, Color]
rx.color("accent", 9)
is_animation_active
bool
True in CSR, False in SSR
animation_begin
int
0
animation_duration
int
1500
animation_easing
"ease" | "ease-in" | ...
"ease"

Valid Children

LabelListErrorBar