Library

/

Graphing

/

Charts

/

Composedchart

Composed Chart

A composed_chart is a higher-level component chart that is composed of multiple charts, where other charts are the children of the composed_chart. The charts are placed on top of each other in the order they are provided in the composed_chart function.

To learn more about individual charts, checkout: area_chart, line_chart, or bar_chart.

def composed():
    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.cartesian_grid(stroke_dasharray="3 3"),
        rx.recharts.graphing_tooltip(),
        data=data,
        height=250,
        width="100%",
    )

API Reference

rx.recharts.ComposedChart

A Composed chart component in Recharts.

PropType | ValuesDefault
base_value
"dataMin" | "dataMax" | ...
"auto"
bar_category_gap
Union[str, int]
"10%"
bar_gap
int
4
bar_size
int
reverse_stack_order
bool
False
data
List
margin
Dict[str, Any]
sync_id
str
sync_method
"index" | "value"
"index"
layout
"vertical" | "horizontal"
"horizontal"
stack_offset
"expand" | "none" | ...
width
Union[str, int]
"100%"
height
Union[str, int]
"100%"

Valid Children

XAxisYAxisReferenceAreaReferenceDotReferenceLineBrushCartesianGridLegendGraphingTooltipAreaLineBar

Event Triggers

See the full list of default event triggers