Library
/
Chakra
/
Datadisplay
/
Stat
The stat component is a great way to visualize statistics in a clean and concise way.
- Example Price
- $25
- The price of the item.
rx.chakra.stat(
rx.chakra.stat_label("Example Price"),
rx.chakra.stat_number("$25"),
rx.chakra.stat_help_text("The price of the item."),
)Example of a stats in a group with arrow.
- $250
- %50increased by
- £100
- %50decreased by
rx.chakra.stat_group(
rx.chakra.stat(
rx.chakra.stat_number("$250"),
rx.chakra.stat_help_text(
"%50", rx.chakra.stat_arrow(type_="increase")
),
),
rx.chakra.stat(
rx.chakra.stat_number("£100"),
rx.chakra.stat_help_text(
"%50", rx.chakra.stat_arrow(type_="decrease")
),
),
width="100%",
)The Stat component is used to display some statistics. It can take in a label, a number and a help text.
Props
No component specific props
Event Triggers
See the full list of default event triggersA stat label component.
Props
No component specific props
Event Triggers
See the full list of default event triggersThe stat to display.
Props
No component specific props
Event Triggers
See the full list of default event triggersA helper text to display under the stat.
Props
No component specific props
Event Triggers
See the full list of default event triggersA stat arrow component indicating the direction of change.
Event Triggers
See the full list of default event triggersA stat group component to evenly space out the stats.
Props
No component specific props
Event Triggers
See the full list of default event triggersDid you find this useful?
No
Yes
