Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Library

/

Graphing

/

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.

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.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=data,
)

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

No component specific event triggers

← LabelLinechart →

Did you find this useful?