✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨
[ Learn ]
[ Concepts ]
[ Reference ]
Scatter
Scatter is a wrapper component that renders a scatter graph.
Data
Scatter accepts a data prop, which is an array of dictionaries with x and y keys. You can contruct your own data as input, or use the
rx.data helper function to generate a data array from a x and y list.data = rx.data(
"scatter", x=[1, 2, 3, 4, 5], y=[1, 2, 3, 4, 10]
)Which will render as:
data = [
{"x": 1, "y": 1},
{"x": 2, "y": 2},
{"x": 3, "y": 3},
{"x": 4, "y": 4},
{"x": 5, "y": 10},
]Examples
The following example shows a basic
rx.scatter component.rx.chart(
rx.scatter(
data=rx.data(
"scatter", x=[1, 2, 3, 4, 5], y=[1, 2, 3, 4, 10]
),
)
)Scatter also accepts a style prop, which is an object of style properties.
rx.chart(
rx.scatter(
data=rx.data(
"scatter", x=[1, 2, 3, 4, 5], y=[1, 2, 3, 4, 10]
),
),
rx.scatter(
data=rx.data(
"scatter", x=[1, 2, 3, 4, 5], y=[5, 12, 4, 6, 1]
),
style={"data": {"fill": "red"}},
),
)Scatter also accepts a bubble_property prop, which is a string that specifies which property of the data object should be used to determine the size of the bubble. Additionally you can specify the min_bubble_size and max_bubble_size props, which determine the minimum and maximum size of the bubbles.
rx.chart(
rx.scatter(
data=rx.data(
"scatter",
x=[1, 2, 3, 4, 5],
y=[1, 2, 3, 4, 10],
amount=[1, 2, 3, 4, 10],
),
min_bubble_size=1.0,
max_bubble_size=10.0,
bubble_property="amount",
)
)Scatter
Display a victory scatter.
Base Event Triggers
Copyright © 2023 Pynecone, Inc.