Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Graphing

/

General

/

Legend

A legend tells what each plot represents. Just like on a map, the legend helps the reader understand what they are looking at. For a line graph for example it tells us what each line represents.

def legend_simple():
    return rx.recharts.composed_chart(
        rx.recharts.area(
            data_key="uv", stroke="#8884d8", fill="#8884d8"
        ),
        rx.recharts.bar(
            data_key="amt", bar_size=20, fill="#413ea0"
        ),
        rx.recharts.line(
            data_key="pv",
            type_="monotone",
            stroke="#ff7300",
        ),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        rx.recharts.legend(),
        data=data,
        width="100%",
        height=300,
    )

The style and layout of the legend can be customized using a set of props. width and height set the dimensions of the container that wraps the legend, and layout can set the legend to display vertically or horizontally. align and vertical_align set the position relative to the chart container. The type and size of icons can be set using icon_size and icon_type.

def legend_props():
    return rx.recharts.composed_chart(
        rx.recharts.line(
            data_key="pv",
            type_="monotone",
            stroke=rx.color("accent", 7),
        ),
        rx.recharts.line(
            data_key="amt",
            type_="monotone",
            stroke=rx.color("green", 7),
        ),
        rx.recharts.line(
            data_key="uv",
            type_="monotone",
            stroke=rx.color("red", 7),
        ),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        rx.recharts.legend(
            width=60,
            height=100,
            layout="vertical",
            align="right",
            vertical_align="top",
            icon_size=15,
            icon_type="square",
        ),
        data=data,
        width="100%",
        height=300,
    )

A Legend component in Recharts.

PropTypeDescriptionValues
widthint

The width of legend container. Number

heightint

The height of legend container. Number

layoutLiteral

The layout of legend items. 'horizontal' | 'vertical'

alignLiteral

The alignment of legend items in 'horizontal' direction, which can be 'left', 'center', 'right'.

vertical_alignLiteral

The alignment of legend items in 'vertical' direction, which can be 'top', 'middle', 'bottom'.

icon_sizeint

The size of icon in each legend item.

icon_typeLiteral

The type of icon in each legend item. 'line' | 'plainline' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye'

chart_widthint

The width of chart container, usually calculated internally.

chart_heightint

The height of chart container, usually calculated internally.

marginDict

The margin of chart container, usually calculated internally.

Event Triggers

See the full list of default event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting