Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

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

A stat label component.

Props

No component specific props

The stat to display.

Props

No component specific props

A helper text to display under the stat.

Props

No component specific props

A stat arrow component indicating the direction of change.

PropTypeDescriptionValues
type_str

The type of arrow, either increase or decrease.

A stat group component to evenly space out the stats.

Props

No component specific props

Did you find this useful?

HomeGalleryChangelogIntroductionHosting