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.
ExpandCollapse
Legend Type and Shape
Legend Type:
Shape:
ExpandCollapse
API Reference
rx.recharts.ScatterChart
A Scatter chart component in Recharts.
Props
| Prop | Type | Description |
|---|---|---|
width | Union[int, str] | The width of chart container. String or Integer. |
height | Union[int, str] | The height of chart container. |
margin | Dict[str, Any] | The sizes of whitespace around the chart. |
Valid Children
XAxisYAxisZAxisReferenceAreaReferenceDotReferenceLineBrushCartesianGridLegendGraphingTooltipScatterDefsEvent Triggers
See the full list of default event triggersrx.recharts.Scatter
A Scatter component in Recharts.
Props
| Prop | Type | Description |
|---|---|---|
data | Sequence | 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 | "circle""cross""diamond""line""plainline""rect""square""star""triangle""wye""none" | 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 | Union[int, str] | The id of x-axis which is corresponding to the data. |
y_axis_id | Union[int, str] | The id of y-axis which is corresponding to the data. |
z_axis_id | Union[int, 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 | "square""circle""cross""diamond""star""triangle""wye" | If a string set, specified symbol will be used to show scatter item. 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye'. |
line_type | "joint""fitting" | 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 | Union[str, Color] | The fill color of the scatter. |
is_animation_active | bool | If set false, animation of bar will be disabled. |
animation_begin | int | Specifies when the animation should begin, the unit of this option is ms. |
animation_duration | int | Specifies the duration of animation, the unit of this option is ms. |
animation_easing | "ease""ease-in""ease-out""ease-in-out""linear" | The type of easing function. |
Valid Children
LabelListErrorBar