Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

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

No component specific event triggers

A stat label component.

Props

No component specific props

Event Triggers

No component specific event triggers

The stat to display.

Props

No component specific props

Event Triggers

No component specific event triggers

A helper text to display under the stat.

Props

No component specific props

Event Triggers

No component specific event triggers

A stat arrow component indicating the direction of change.

PropTypeDescriptionValues
type_str

The type of arrow, either increase or decrease.

Event Triggers

No component specific event triggers

A stat group component to evenly space out the stats.

Props

No component specific props

Event Triggers

No component specific event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting