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.
API Reference
rx.recharts.ComposedChart
A Composed chart component in Recharts.
Props
| Prop | Type | Description |
|---|---|---|
width | Union[int, str] | The width of chart container. String or Integer. |
height | Union[int, str] | 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[int, str] | 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