Line Chart

LineChart component

Displays sensor data as points connected by lines.

Properties

• config: Config – chart configuration object describing axes and signals
  • Config:
    • yAxes: Axis[] – an array of axis configuration objects
    • signalSets: SignalSet[] – an array of signal set specifications
  • Axis:
    • visible: boolean – determines if the axis is visible, defaults to true
    • 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: TODO

TBD`

• ``: ** –
• ``: ** –

height: number, the height of the chart in pixels, defaults to 500 margin: Margin, holds the dimensions of chart margins in pixels, defaults to 60 on the left, 5 on the right, 5 at the top, and 20 at the bottom Margin left, right, top, bottom: number 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 controlTimeIntervalChartWidth: boolean, … lineVisibility: function, ...

How to...

...set the limits of y-axis

Set the config.yAxes property. All the values are in the same units as the data. The minimum and maximum of the axis are computed as follows:

1. The min is set to the smaller of the values includedMin (if specified) and the smallest value from the fetched data. Similarly, the max is set to the higher of the values includedMax (if specified) and the highest value from the fetched data.
2. If belowMin is specified, the min is set to min - belowMin * (max - min). Similarly, if aboveMax is specified, the max is set to max + aboveMax * (max - min).
3. If limitMin is specified, the min is clamped so it isn't smaller than limitMin. Similarly, if limitMax is specified, the max is clamped so it isn't higher than limitMax.

Set the limits to exact values

Set both the includedMin and limitMin (or includedMax and aboveMax) to the same value.