Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Graphing

/

General

/

Label

Label is a component used to display a single label at a specific position within a chart or axis, while LabelList is a component that automatically renders a list of labels for each data point in a chart series, providing a convenient way to display multiple labels without manually positioning each one.

Here's a simple example that demonstrates how you can customize the label of your axis using rx.recharts.label. The value prop represents the actual text of the label, the position prop specifies where the label is positioned within the axis component, and the offset prop is used to fine-tune the label's position.

def label_simple():
    return rx.recharts.bar_chart(
        rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
        rx.recharts.bar(
            rx.recharts.label_list(
                data_key="uv", position="top"
            ),
            data_key="uv",
            fill=rx.color("accent", 8),
        ),
        rx.recharts.x_axis(
            rx.recharts.label(
                value="center",
                position="center",
                offset=30,
            ),
            rx.recharts.label(
                value="inside left",
                position="insideLeft",
                offset=10,
            ),
            rx.recharts.label(
                value="inside right",
                position="insideRight",
                offset=10,
            ),
            height=50,
        ),
        data=data,
        margin={
            "left": 20,
            "right": 20,
            "top": 20,
            "bottom": 20,
        },
        width="100%",
        height=250,
    )

rx.recharts.label_list takes in a data_key where we define the data column to plot.

def label_list():
    return rx.recharts.bar_chart(
        rx.recharts.bar(
            rx.recharts.label_list(
                data_key="uv", position="top"
            ),
            data_key="uv",
            stroke="#8884d8",
            fill="#8884d8",
        ),
        rx.recharts.bar(
            rx.recharts.label_list(
                data_key="pv", position="top"
            ),
            data_key="pv",
            stroke="#82ca9d",
            fill="#82ca9d",
        ),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        margin={
            "left": 10,
            "right": 0,
            "top": 20,
            "bottom": 10,
        },
        data=data,
        width="100%",
        height=300,
    )

A Label component in Recharts.

PropTypeDescriptionValues
view_boxDict

The box of viewing area, which has the shape of {x: someVal, y: someVal, width: someVal, height: someVal}, usually calculated internally.

valuestr

The value of label, which can be specified by this props or the children of

offsetint

The offset of label which can be specified by this props or the children of

positionLiteral

The position of label which can be specified by this props or the children of

Event Triggers

See the full list of default event triggers

A LabelList component in Recharts.

PropTypeDescriptionValues
data_keyUnion

The key of a group of label values in data.

positionLiteral

The position of each label relative to it view box。"Top" | "left" | "right" | "bottom" | "inside" | "outside" | "insideLeft" | "insideRight" | "insideTop" | "insideBottom" | "insideTopLeft" | "insideBottomLeft" | "insideTopRight" | "insideBottomRight" | "insideStart" | "insideEnd" | "end" | "center"

offsetint

The offset to the specified "position"

strokeUnion

The color of the line stroke.

fillUnion

The width of the line stroke.

Did you find this useful?

HomeGalleryChangelogIntroductionHosting