Composed Chart

A composed_chart is a chart that is composed of multiple charts. The charts are placed on top of each other. The charts are placed in the order they are given in the composed_chart function.

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,
)

data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]

API Reference

ComposedChart

A Composed chart component in Recharts.

Prop	Type	Description
`base_value`	Union	The base value of area. Number \| 'dataMin' \| 'dataMax' \| 'auto'
`bar_category_gap`	Union	The gap between two bar categories, which can be a percent value or a fixed value. Percentage \| Number
`bar_gap`	int	The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage \| Number
`bar_size`	int	The width of all the bars in the chart. Number
`reverse_stack_order`	bool	If false set, stacked items will be rendered left to right. If true set, stacked items will be rendered right to left. (Render direction affects SVG layering, not x position.)
`data`	List	The source data, in which each element is an object.
`sync_id`	str	If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
`sync_method`	Literal	When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' \| 'value' \| function
`width`	Union	The width of chart container. String or Integer
`height`	Union	The height of chart container.
`layout`	Literal	The layout of area in the chart. 'horizontal' \| 'vertical'
`margin`	Dict	The sizes of whitespace around the chart.
`stack_offset`	Literal	The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' \| 'none' \| 'wiggle' \| 'silhouette'

Valid Children

XAxis
YAxis
ReferenceArea
ReferenceDot
ReferenceLine
Brush
CartesianGrid
Legend
GraphingTooltip
Area
Line
Bar

Event Triggers

See the full list of default event triggers

← Cartesianaxisgrid Errorbar →

Did you find this useful?

No

Yes

Raise an issue

Edit this page

Home Gallery Changelog Introduction Hosting

Composed Chart

API Reference

ComposedChart