Stacked Area Chart

StackAreaChart component

Displays data as areas stacked on top of each other.

Properties

Most of the properties are similar to LineChart.

• config: Config – chart configuration object describing axes and signals
  • Config:
    • yAxes: Axis[] – an array of axis configuration objects, defaults to [{ visible: true }] (one axis for all the data)
    • signalSets: SignalSet[] – an array of signal set specifications
  • Axis:
    • visible: boolean – determines if the axis is visible, defaults to false
    • label: string – a label to display next to the axis
    • labelOffset: number – offset of the axis label from the axis, defaults to 40
    • includedMin: number – a value that is always displayed on the axis. The real minimum of the axis can be lower if there are lower values in the data.
    • belowMin: number – free space below the data, specified as a multiple of the range of the data
    • limitMin: number – limit to the minimum of the axis, it can't be lower than this value even if there are smaller values in the data
    • includedMax: number – a value that is always displayed on the axis. The real maximum of the axis can be higher if there are higher values in the data.
    • aboveMax: number – free space above the data, specified as a multiple of the range of the data
    • limitMax: number – limit to the maximum of the axis, it can't be higher than this value even if there are higher values in the data
  • SignalSet:
    • cid: string – the identifier of the signal set
    • tsSigCid: string – the identifier of the timestamp signal, defaults to "ts"
    • signals: Signal[] – array of signal specifications
  • Signal:
    • cid: string – the identifier of the signal in the signal set
    • label: string – signal label, the signal is only shown if not null TODO: check
    • enabled: boolean – the signal is shown if true or undefined
    • axis: number – index of an axis for the signal values, defaults to 0
    • color: d3-color.color – color of the line
    • lineWidth: number – width of the line
• height: number – the height of the chart in pixels, defaults to 500
• margin: Margin
• withToolTip: boolean – enables a tooltip displaying signal values, defaults to true
• toolTipExtraProps: ToolTipProps – extra properties for the tooltip
  • ToolTipExtraProps:
    • width: number – determines the width of the tooltip box, defaults to 350
• withBrush: boolean – enables selecting part of a chart to zoom in, defaults to true
• withZoom: boolean – enables zoom, defaults to true
• zoomUpdateReloadInterval: number – milliseconds after the last zoom event ends before new data are fetched; set to null to disable automatic updates of the data
• contentComponent: function – React component rendered on top of the chart, mutually exclusive with contentRender
• contentRender: function – the returned value is rendered on top of the chart, mutually exclusive with contentComponent
• onClick: function – TODO
• tooltipContentComponent: function – React component rendered inside the tooltip, mutually exclusive with tooltipContentRender
• tooltipContentRender: function – the returned value is rendered inside the tooltip, mutually exclusive with tooltipContentComponent
• lineCurve: function (d3-shape.curve*) – line interpolation between the data points, defaults to d3-shape.curveLinear (straight line)
• signalAgg: string – TODO, defaults to "avg".
• prepareData: function – function to process the results of queries before rendering them. The data are in the second argument, and the function must modify the object with the data. The return value is discarded.

How to...

...modify the data before rendering

Use the prepareData property.