ReflexKR

The Component Workshop: Reflex's 100 Library Components

Course overview

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typography

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Forms

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Data display

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Disclosure

Tabs

Accordion

Segmented Control

Overlay

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamic rendering

Cond

Match

Foreach

Auto Scroll

Media

Image

Audio

Video

Tables and data grids

Table

Data Table

Data Editor

Charts

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Chart parts

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Other chart libraries

Plotly

Pyplot

HTML elements

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Other tools

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

The Component Workshop: Reflex's 100 Library Components

Charts

Composed Chart

rx.recharts.composed_chart

Official docs

Workshop order

Please overlay monthly orders as bars and the target as a dashed line on one chart, so the months that beat the target stand out right away.

rx.recharts.composed_chart is a container that mixes areas (area), bars (bar) and lines (line) in one chart. Use it when a single chart type can't tell the whole story, for example actual values as bars and a target or average as a line. Children are drawn in the order you write them, so later series are drawn on top of earlier ones.

The examples use the composedchart_data below.

composedchart_data = [
    {"month": "Jan", "visits": 4000, "orders": 2400, "target": 2400},
    {"month": "Feb", "visits": 3000, "orders": 1398, "target": 2210},
    {"month": "Mar", "visits": 2000, "orders": 5800, "target": 2290},
    {"month": "Apr", "visits": 2780, "orders": 3908, "target": 2000},
    {"month": "May", "visits": 1890, "orders": 4800, "target": 2181},
    {"month": "Jun", "visits": 2390, "orders": 3800, "target": 2500},
]


rx.recharts.composed_chart(
    rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 4)),
    rx.recharts.bar(data_key="target", bar_size=20, fill=rx.color("teal", 8)),
    rx.recharts.line(data_key="orders", type_="monotone", stroke=rx.color("orange", 9)),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    data=composedchart_data,
    width="100%",
    height=280,
)

Try the props

A composed chart has both the gap props of the bar chart and the base_value of the area chart. base_value is the floor an area starts from. With "dataMin" it starts at the smallest value in the data, so the area floats upward.

Try the props

bar_color

curve

base_value

bar_category_gap

rx.recharts.composed_chart(
    rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 4)),
    rx.recharts.bar(data_key="target", fill=rx.color("teal", 8)),
    rx.recharts.line(data_key="orders", type_="monotone", stroke=rx.color("orange", 9), stroke_width=2),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=composedchart_data,
    base_value="auto",
    bar_category_gap="10%",
    width="100%",
    height=280,
)

base_value affects only area, and bar_category_gap only bar. The container's props are split by series type.

Prop	Values	Default	Use
`data`	list of dicts	none	Data shared by every series
`layout`	`"horizontal"` `"vertical"`	`"horizontal"`	Flow direction
`base_value`	number, `"dataMin"` `"dataMax"` `"auto"`	`"auto"`	Floor value of `area`
`bar_category_gap`	percentage or number	`"10%"`	Gap between items (`bar`)
`bar_gap`	number	`4`	Gap between bars within one item (`bar`)
`bar_size`	number	auto	Thickness of every bar
`stack_offset`	`"none"` `"expand"` `"wiggle"` `"silhouette"`	none	Baseline calculation for stacked series
`reverse_stack_order`	`True` / `False`	`False`	Reverses the stacking order
`sync_id`, `sync_method`	string / `"index"` `"value"`	none / `"index"`	Link tooltips and brushes with other charts
`margin`, `width`, `height`	dict / number or percentage		Space around the chart and its size
`on_click` `on_mouse_enter` `on_mouse_move` `on_mouse_leave`	events		Mouse events on the chart area

The props of area, bar and line are the same as on their own chart pages. In 0.10, bar_gap on composed_chart accepts only numbers (bar_chart also accepts percentage strings).

When to use a composed chart

When you want actual values (bars) alongside a target, average or trend (line)
When you compare values of a different nature on the same x-axis, such as a volume (area) and the number of events within it (bars)

All series share the same data, the same axes, and the same tooltip and legend. That's why a single tooltip shows the bar value and the line value together.

Drawing order

Children stack from bottom to top in the order you write them. The upper chart lists the bars first; the lower one lists the area first. A dark area that comes later hides the bars, so it is usual to list the broadly painted series first.

composedchart_data = [
    {"month": "Jan", "visits": 4000, "orders": 2400, "target": 2400},
    {"month": "Feb", "visits": 3000, "orders": 1398, "target": 2210},
    {"month": "Mar", "visits": 2000, "orders": 5800, "target": 2290},
    {"month": "Apr", "visits": 2780, "orders": 3908, "target": 2000},
    {"month": "May", "visits": 1890, "orders": 4800, "target": 2181},
    {"month": "Jun", "visits": 2390, "orders": 3800, "target": 2500},
]


rx.flex(
    rx.recharts.composed_chart(
        rx.recharts.bar(data_key="orders", fill=rx.color("teal", 8)),
        rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 6)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        data=composedchart_data,
        width="100%",
        height=200,
    ),
    rx.recharts.composed_chart(
        rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 6)),
        rx.recharts.bar(data_key="orders", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        data=composedchart_data,
        width="100%",
        height=200,
    ),
    direction="column",
    spacing="4",
    width="100%",
)

Two axes

On a shared axis, values of completely different magnitudes, such as order counts (tens) and revenue (thousands), leave one of them flattened against the floor. Put a second y-axis on the right with orientation="right" and pair series with axes through y_axis_id. Two scales are easy to misread, so make clear which value belongs to which axis with the legend and axis colors.

rx.recharts.composed_chart(
    rx.recharts.bar(
        data_key="orders",
        bar_size=20,
        fill=rx.color("accent", 8),
        y_axis_id="left",
    ),
    rx.recharts.line(
        data_key="revenue",
        type_="monotone",
        stroke=rx.color("green", 9),
        y_axis_id="right",
    ),
    rx.recharts.x_axis(data_key="day"),
    rx.recharts.y_axis(y_axis_id="left"),
    rx.recharts.y_axis(y_axis_id="right", orientation="right"),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=[
        {"day": "Mon", "orders": 40, "revenue": 2400},
        {"day": "Tue", "orders": 30, "revenue": 1398},
        {"day": "Wed", "orders": 55, "revenue": 9800},
        {"day": "Thu", "orders": 27, "revenue": 3908},
        {"day": "Fri", "orders": 62, "revenue": 4800},
        {"day": "Sat", "orders": 48, "revenue": 3800},
        {"day": "Sun", "orders": 35, "revenue": 4300},
    ],
    width="100%",
    height=300,
)

Filling the order

Orders are bars and the target is a dashed line laid over them. Listing the line after the bars draws it on top, and dot=False removes the dots so it looks like a reference line.

composedchart_data = [
    {"month": "Jan", "visits": 4000, "orders": 2400, "target": 2400},
    {"month": "Feb", "visits": 3000, "orders": 1398, "target": 2210},
    {"month": "Mar", "visits": 2000, "orders": 5800, "target": 2290},
    {"month": "Apr", "visits": 2780, "orders": 3908, "target": 2000},
    {"month": "May", "visits": 1890, "orders": 4800, "target": 2181},
    {"month": "Jun", "visits": 2390, "orders": 3800, "target": 2500},
]


rx.recharts.composed_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.bar(data_key="orders", name="Orders", fill=rx.color("accent", 8), radius=[4, 4, 0, 0], max_bar_size=28),
    rx.recharts.line(
        data_key="target",
        name="Target",
        type_="monotone",
        stroke=rx.color("orange", 9),
        stroke_width=2,
        stroke_dasharray="5 4",
        dot=False,
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=composedchart_data,
    width="100%",
    height=300,
)

Workshop notes

Mix area, bar and line inside one composed_chart. They share the data, axes and tooltip.
Children written later are drawn on top. Put broadly painted series first.
base_value applies to area; bar_category_gap, bar_gap and bar_size apply to bar.
Put values of a different magnitude on a second axis with y_axis_id. Only when you really need it.
Linking with other charts via sync_id works the same as on the Area Chart page.

← Previous

Charts · Line Chart

Charts · Pie Chart

Get news about new lessons

We'll email you when this course gets new lessons or a follow-up course opens.