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.
Simple Example
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.
ExpandCollapse
Label List Example
rx.recharts.label_list takes in a data_key where we define the data column to plot.
ExpandCollapse
Styling Labels
Styling that is not exposed as a prop on rx.recharts.label can be passed through to the underlying Recharts label with custom_attrs. This is useful for setting the font size and weight of an axis label, or rotating a y-axis label with angle so it reads vertically along the axis.
ExpandCollapse
API Reference
rx.recharts.Label
A Label component in Recharts.
Props
| Prop | Type | Description |
|---|---|---|
view_box | Dict[str, Any] | The box of viewing area, which has the shape of {x: someVal, y: someVal, width: someVal, height: someVal}, usually calculated internally. |
value | str | The value of label, which can be specified by this props or the children of <Label />. |
offset | int | The offset of label which can be specified by this props or the children of <Label />. |
position | "top""left""right""bottom""inside""outside""insideLeft""insideRight""insideTop""insideBottom""insideTopLeft""insideBottomLeft""insideTopRight""insideBottomRight""insideStart""insideEnd""end""center" | The position of label which can be specified by this props or the children of <Label />. |
Event Triggers
See the full list of default event triggersrx.recharts.LabelList
A LabelList component in Recharts.
Props
| Prop | Type | Description |
|---|---|---|
data_key | Union[int, str] | The key of a group of label values in data. |
position | "top""left""right""bottom""inside""outside""insideLeft""insideRight""insideTop""insideBottom""insideTopLeft""insideBottomLeft""insideTopRight""insideBottomRight""insideStart""insideEnd""end""center" | 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". |
offset | int | The offset to the specified "position". |
fill | Union[str, Color] | The fill color of each label. |
stroke | Union[str, Color] | The stroke color of each label. |