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.

• amt
• pv
• uv

显示数据格式

<ComposedChart width={730} height={250} data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <CartesianGrid stroke="#f5f5f5" />
  <Area type="monotone" dataKey="amt" fill="#8884d8" stroke="#8884d8" />
  <Bar dataKey="pv" barSize={20} fill="#413ea0" />
  <Line type="monotone" dataKey="uv" stroke="#ff7300" />
</ComposedChart>

父组件

• <ResponsiveContainer />

子组件

• <XAxis />
• <YAxis />
• <ReferenceArea />
• <ReferenceDot />
• <ReferenceLine />
• <Brush />
• <CartesianGrid />
• <Legend />
• <Tooltip />
• <Area />
• <Line />
• <Bar />
• <Customized />
• validate svg elements…

Properties

• layout 'horizontal' | 'vertical'

布局类型，是横向的还是纵向的。

默认值：'horizontal'

• syncId String optional

如果任何两个或者多个类目型图表（LineChart, AreaChart, BarChart, ComposedChart）具有相同的 syncId，这两个图表可以联动，包括 Tooltip 以及 Brush 的联动。

示例：

• Two synchronized AreaChart

• width Number

图表的宽度

• height Number

图表的高度

• data Array

输入数据，现在支持的类型是对象数组。

格式：

[{name: 'a', value: 12}]

• margin Object

图表四周的留白大小，支持传入部分值（如： { top: 5 }）。

默认值：{ top: 5, right: 5, bottom: 5, left: 5 }

格式：

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

• barCategoryGap Percentage | Number

两个类目之间的间隔距离，如果值为百分比，会根据类目宽度来计算实际值。

默认值：'10%'

• barGap Number

某一个类目下，相邻的两个柱条的间隔大小。如果值为百分比，会根据类目宽度来计算实际值。

默认值：4

• barSize Number optional

柱条的宽度。如果指定这个值，会根据 barCategoryGap 和 barGap 来计算柱条的宽度，每组柱条的宽度是一样的。

• reverseStackOrder Boolean optional

如果设置为false，堆叠的项目将从左到右呈现。如果真正设置，堆叠的项目将从右到左呈现。 （渲染方向影响SVG分层，而不影响x位置。）

默认值：false

• onClick Function optional

鼠标在图表图形区域 click 事件的回调函数。

• onMouseEnter Function optional

鼠标在图表图形区域 mouseenter 事件的回调函数。

• onMouseMove Function optional

鼠标在图表图形区域 mousemove 事件的回调函数。

• onMouseLeave Function optional

鼠标在图表图形区域 mouseleave 事件的回调函数。