Composed Chart
Composed charts in Reflex are built on Recharts, a React charting library, and created in pure Python. A composed_chart (also called a combo 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.
When to Use a Composed Chart
A composed chart is useful whenever a single chart type can't tell the whole story. Common combinations include overlaying a trend line on top of bar totals, drawing an area for a range with a line for the actual value, or comparing a cumulative measure against a per-period one. Because each series — rx.recharts.bar(), rx.recharts.line(), and rx.recharts.area() — is a child of rx.recharts.composed_chart(), they all share the same data, x-axis, tooltip, and legend. Series are drawn in the order you list them, so later children render on top of earlier ones.
Composed Chart with a Dual Axis
When two series use very different scales (for example, a count and a dollar amount), a single y-axis makes the smaller series unreadable. Add a second y-axis and point each series at one with the y_axis_id prop: here the orders bars use the left axis and the revenue line uses the right axis.
ExpandCollapse
Related Charts
Explore more chart types you can build with Reflex and Recharts in pure Python:
API Reference
rx.recharts.ComposedChart
A Composed chart component in Recharts.
Props
| Prop | Type | Description |
|---|---|---|
width | Union[str, int] | The width of chart container. String or Integer. |
height | Union[str, int] | The height of chart container. |
data | Sequence | The source data, in which each element is an object. |
margin | Dict[str, Any] | The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}. |
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 | "index""value" | 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. |
layout | "vertical""horizontal" | The layout of area in the chart. 'horizontal' | 'vertical'. |
stack_offset | "expand""none""wiggle""silhouette" | 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'. |
base_value | "dataMin""dataMax""auto" | The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'. |
bar_category_gap | Union[str, int] | 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. |
bar_size | int | The width or height of each bar. If the barSize is not specified, the size of the bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups. |
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). |
Valid Children
XAxisYAxisReferenceAreaReferenceDotReferenceLineBrushCartesianGridLegendGraphingTooltipAreaLineBarDefs