AreaChart

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

Parent Components

Child Components

Properties

  • layout'horizontal' | 'vertical'

    The layout of area 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 }]
[{ name: 'a', value: [5, 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 }

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

    DEFAULT: 'none'

    Examples:

  • baseValueNumber | 'dataMin' | 'dataMax' | 'auto'

    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.