ComposedChart

Props

• accessibilityLayerbooleanoptional

  Turn on accessibility support for keyboard-only and screen reader users.

  DEFAULT: true

• barCategoryGapnumber | stringoptional

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

  DEFAULT: "10%"

  Examples:

  • Bar Alignment Guide

• barGapnumber | stringoptional

  The gap between two bars in the same category.

  DEFAULT: 4

  Examples:

  • Bar Alignment Guide

• barSizenumber | stringoptional

  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.

• baseValue"dataMax" | "dataMin" | numberoptional

  The base value of area.

• childrenReactNodeoptional

  Examples:

  • Line Bar Area Composed Chart
  • Same Data Composed Chart
  • Vertical Composed Chart
  • Composed Chart With Axis Labels
  • Scatter And Line Of Best Fit
  • Banded Chart
  • Target Price Chart with active Label
  • Composed Responsive Container

• classNamestringoptional

• compactbooleanoptional

• dataReadonlyArray<unknown>optional

  The source data. Each element should be an object. The properties of each object represent the values of different data dimensions.

  Use the dataKey prop to specify which properties to use.

  FORMAT:

  data={[{ name: 'a', value: 12 }]}
  data={[{ label: 'foo', measurements: [5, 12] }]}

  Examples:

  • Line Bar Area Composed Chart
  • Same Data Composed Chart
  • Vertical Composed Chart
  • Composed Chart With Axis Labels
  • Scatter And Line Of Best Fit
  • Banded Chart
  • Target Price Chart with active Label
  • Composed Responsive Container

• dataKeyFunction | number | stringoptional

• descstringoptional

• height`${number}%` | numberoptional

  The height of chart container. Can be a number or a percent string like "100%".

  Examples:

  • Chart sizing guide
  • Composed Responsive Container

• idstringoptional

  Examples:

  • Target Price Chart with active Label

• layout"horizontal" | "vertical"optional

  The layout of chart defines the orientation of axes, graphical items, and tooltip.

  DEFAULT: "horizontal"

  Examples:

  • Vertical Composed Chart

• marginPartial<Margin>optional

  Empty space around the container.

  DEFAULT: {"top":5,"right":5,"bottom":5,"left":5}

  Examples:

  • Line Bar Area Composed Chart
  • Same Data Composed Chart
  • Vertical Composed Chart
  • Composed Chart With Axis Labels
  • Scatter And Line Of Best Fit
  • Banded Chart
  • Target Price Chart with active Label
  • Composed Responsive Container

• maxBarSizenumberoptional

  The maximum width of all the bars in a horizontal BarChart, or maximum height in a vertical BarChart.

• responsivebooleanoptional

  If true, then it will listen to container size changes and adapt the SVG chart accordingly. If false, then it renders the chart at the specified width and height and will stay that way even if the container size changes.

  This is similar to ResponsiveContainer but without the need for an extra wrapper component. The responsive prop also uses standard CSS sizing rules, instead of custom resolution logic (like ResponsiveContainer does).

  DEFAULT: false

  Examples:

  • Chart sizing guide
  • Line Bar Area Composed Chart
  • Same Data Composed Chart
  • Vertical Composed Chart
  • Composed Chart With Axis Labels
  • Scatter And Line Of Best Fit
  • Banded Chart
  • Target Price Chart with active Label

• reverseStackOrderbooleanoptional

  If false, stacked items will be rendered left to right. If true, stacked items will be rendered right to left.

  Render direction affects SVG layering, not x position.

  DEFAULT: false

• rolestringoptional

  The ARIA role for the chart, which provides semantic information for screen reader users.

• stackOffset"expand" | "none" | "positive" | "sign" | "silhouette" | "wiggle"optional

  The type of offset function used to generate the lower and upper values in the series array. The types are built-in offsets in d3-shape. Only applicable for stacked Area or Bar charts. Has no effect when the stackId prop is not set on Area or Bar components.

  DEFAULT: "none"

  Examples:

  • Chart with stackOffset=sign example
  • https://d3js.org/d3-shape/stack#stack_offset

• styleReact.CSSPropertiesoptional

  Examples:

  • Line Bar Area Composed Chart
  • Same Data Composed Chart
  • Vertical Composed Chart
  • Composed Chart With Axis Labels
  • Scatter And Line Of Best Fit
  • Banded Chart
  • Target Price Chart with active Label

• syncIdnumber | stringoptional

  Charts with the same syncId will synchronize Tooltip and Brush events.

  Examples:

  • Synchronized Charts Example

• syncMethod"index" | "value" | Functionoptional

  Customize how the charts will synchronize tooltips and brushes.index: synchronize using the data index in the data array. Index expects that all data has the same length.value: synchronize using the data value on categorical axis (categorical: XAxis in horizontal layout, YAxis in vertical layout). function: a custom sync method which receives tick and data as argument and returns an index.

  DEFAULT: "index"

• tabIndexnumberoptional

  If and where the chart should appear in the tab order

• throttleDelaynumberoptional

• titlestringoptional

• width`${number}%` | numberoptional

  The width of chart container. Can be a number or a percent string like "100%".

  Examples:

  • Chart sizing guide
  • Composed Responsive Container

• onClickCategoricalChartFuncoptional

  The customized event handler of click in this chart.

• onContextMenuCategoricalChartFuncoptional

  The customized event handler of contextmenu in this chart.

• onDoubleClickCategoricalChartFuncoptional

  The customized event handler of dblclick in this chart.

• onMouseDownCategoricalChartFuncoptional

  The customized event handler of mousedown in this chart.

• onMouseEnterCategoricalChartFuncoptional

  The customized event handler of mouseenter in this chart.

• onMouseLeaveCategoricalChartFuncoptional

  The customized event handler of mouseleave in this chart.

  Examples:

  • Target Price Chart with active Label

• onMouseMoveCategoricalChartFuncoptional

  The customized event handler of mousemove in this chart.

  Examples:

  • Target Price Chart with active Label

• onMouseUpCategoricalChartFuncoptional

  The customized event handler of mouseup in this chart.

• onTouchEndCategoricalChartFuncoptional

  The customized event handler of touchend in this chart.

• onTouchMoveCategoricalChartFuncoptional

  The customized event handler of touchmove in this chart.

• onTouchStartCategoricalChartFuncoptional

  The customized event handler of touchstart in this chart.