AreaChart

All svg elements can be added into the AreaChart component, such as defs, linearGradient, etc.

Properties

• layout'horizontal' | 'vertical'

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

  DEFAULT: "horizontal"

• syncIdStringoptional

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

  Examples:

  • Two synchronized AreaChart

• 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"

• widthPercent | Number

  The width of chart container.

• heightNumber

  The height of chart container.

• dataArray

  The source data. Each element should be an object.

  FORMAT:

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

• marginObject

  Empty space around the container.

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

  FORMAT:

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

• stackOffset'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. 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:

  • An AreaChart with stackOffset specified to 'expand'
  • D3 stackOffset

• baseValueNumber | 'dataMin' | 'dataMax'

  The base value of area.

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