ComposedChart
A chart composed of line, area, and bar charts. When you just want to draw a chart of a single type like line, then LineChart is recommended.
Parent Components
Child Components
Properties
layout'horizontal' | 'vertical'
The layout of areas, bars, lines in the chart.
DEFAULT: 'horizontal'
syncIdStringoptional
If any two categorical charts(LineChart, AreaChart, BarChart, ComposedChart) have the same syncId, these two charts can sync the position tooltip, and the startIndex, endIndex of Brush.
Examples:
syncMethod'index' | 'value' | functionoptional
When syncId is provided, allows customisation of how the charts will synchronize tooltips 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.
DEFAULT: 'index'
widthNumber
The width of chart container.
heightNumber
The height of chart container.
dataArray
The source data, in which each element is an object.
FORMAT:
[{name: 'a', value: 12}]marginObject
The sizes of whitespace around the container.
DEFAULT: { top: 5, right: 5, bottom: 5, left: 5 }
FORMAT:
{ top: 5, right: 5, bottom: 5, left: 5 }barCategoryGapPercentage | Number
The gap between two bar categories, which can be a percent value or a fixed value.
DEFAULT: '10%'
barGapNumber
The gap between two bars in the same category.
DEFAULT: 4
barSizeNumberoptional
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.
reverseStackOrderBooleanoptional
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.)
DEFAULT: false
baseValueNumber | 'dataMin' | 'dataMax' | 'auto'optional
The base value of area.
DEFAULT: auto
onClickFunctionoptional
The customized event handler of click in this chart.
onMouseEnterFunctionoptional
The customized event handler of mouseenter in this chart.
onMouseMoveFunctionoptional
The customized event handler of mousemove in this chart.
onMouseLeaveFunctionoptional
The customized event handler of mouseleave in this chart.
onDoubleClickFunctionoptional
The customized event handler of dblclick in this chart.
onContextMenuFunctionoptional
The customized event handler of contextmenu in this chart.