✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨
[ Learn ]
[ Concepts ]
[ Reference ]
Chart
Chart is a wrapper component that renders a given set of children on a set of Cartesian or polar axes. Chart reconciles the domain for all its children, controls the layout of the chart, and coordinates animations and shared events. If no children are provided, Chart will render a default set of axes.
The following example shows an empty Chart component, by default it uses Cartesian axis.
rx.hstack(rx.chart(), rx.chart(polar=True))The following example shows a Chart component with a line graph.
rx.chart(
rx.line(
data=rx.data(
"line", x=[1, 2, 3, 4, 5], y=[1, 2, 3, 4, 10]
),
)
)You can also mix and match different types of graphs as children of Chart.
rx.chart(
rx.line(
data=rx.data(
"line", x=[1, 2, 3, 4, 5], y=[1, 2, 3, 4, 10]
),
interpolation="natural",
style={
"data": {"stroke": "green", "strokeWidth": 2}
},
),
rx.scatter(
data=rx.data(
"scatter",
x=[1, 2, 3, 4, 5],
y=[5, 12, 4, 6, 1],
amount=[6, 5, 3, 9, 3],
),
bubble_property="amount",
min_bubble_size=0.0,
max_bubble_size=10.0,
style={"data": {"fill": "#00FFFF", "opacity": 0.5}},
),
domainPadding={"x": 50, "y": 50},
)ChartGroup
Group is a wrapper component that renders a given set of children in a grouped layout.
rx.chart_group(
rx.bar(
data=rx.data(
"bar",
x=["a", "b", "c", "d", "e"],
y=[1, 2, 3, 4, 10],
),
),
rx.bar(
data=rx.data(
"bar",
x=["a", "b", "c", "d", "e"],
y=[5, 12, 4, 6, 1],
),
),
rx.bar(
data=rx.data(
"bar",
x=["a", "b", "c", "d", "e"],
y=[3, 2, 5, 14, 1],
),
),
offset=20.0,
)Group also accepts a style prop, which is an object of style properties.
rx.chart(
rx.chart_group(
rx.bar(
data=rx.data(
"bar",
x=["a", "b", "c", "d", "e"],
y=[1, 2, 3, 4, 10],
),
),
rx.bar(
data=rx.data(
"bar",
x=["a", "b", "c", "d", "e"],
y=[5, 12, 4, 6, 1],
),
),
rx.bar(
data=rx.data(
"bar",
x=["a", "b", "c", "d", "e"],
y=[3, 2, 5, 14, 1],
),
),
offset=20.0,
color_scale="qualitative",
)
)ChartStack
Stack is a wrapper component that renders a given set of children in a stacked layout. Unlike Chart it does not provide axis or domain reconciliation.
rx.chart_stack(
rx.area(
data=rx.data(
"line", x=[1, 2, 3, 4, 5], y=[1, 2, 3, 4, 10]
),
),
rx.area(
data=rx.data(
"line", x=[1, 2, 3, 4, 5], y=[5, 12, 4, 6, 1]
),
),
)Chart
Wrapper component that renders a given set of children on a set of Cartesian or polar axes.
Base Event Triggers
ChartGroup
Display a victory group.
Base Event Triggers
ChartStack
Display a victory stack.
Base Event Triggers
Copyright © 2023 Pynecone, Inc.