Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Graphing

/

Charts

/

Composedchart

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

A Composed chart component in Recharts.

PropTypeDescriptionValues
base_valueUnion

The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'

bar_category_gapUnion

The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number

bar_gapUnion

The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number

bar_sizeint

The width of all the bars in the chart. Number

reverse_stack_orderbool

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

dataList

The source data, in which each element is an object.

marginDict

The sizes of whitespace around the chart.

sync_idstr

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_methodLiteral

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

layoutLiteral

The layout of area in the chart. 'horizontal' | 'vertical'

stack_offsetLiteral

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'

widthUnion

The width of chart container. String or Integer

heightUnion

The height of chart container.

Valid Children

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

Did you find this useful?

HomeGalleryChangelogIntroductionHosting