✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨
[ Learn ]
[ Concepts ]
[ Reference ]
Bar
Bar is a wrapper component that renders a bar graph.
Data
Bar accepts a data prop, which is an array of dictionaries with x and y keys. You can contruct your own data array, or use the
rx.data helper function to generate a data array from a x and y list.data = rx.data(
"bar",
x=["Cats", "Dogs", "Birds", "Fish", "Reptiles"],
y=[1, 2, 3, 4, 10],
)Which will render as:
data = [
{"x": "Cats", "y": 1},
{"x": "Dogs", "y": 2},
{"x": "Birds", "y": 3},
{"x": "Fish", "y": 4},
{"x": "Reptiles", "y": 10},
]Examples
The following example shows a basic
rx.bar component.rx.bar(
data=rx.data(
"bar",
x=["Cats", "Dogs", "Birds", "Fish", "Reptiles"],
y=[1, 2, 3, 4, 10],
),
)Bar also accepts a style prop, which is an object of style properties. Additionally you can specify the interpolation prop, which determines how data points should be connected when creating a path.
rx.chart(
rx.bar(
data=rx.data(
"bar",
x=["Cats", "Dogs", "Birds", "Fish", "Reptiles"],
y=[1, 2, 3, 4, 10],
),
style={
"data": {
"fill": "rgb(107,99,246)",
"stroke": "black",
"strokeWidth": 2,
}
},
),
domain_padding={"x": 20, "y": 0},
)Bar
Display a victory bar.
Base Event Triggers
Copyright © 2023 Pynecone, Inc.