Vue Chart - LineSeries.valueErrorBar

Configures error bars.

Selector: DxValueErrorBar
Type:

Object

Error bars are used on charts to indicate an error or an uncertainty in a reported measurement. They give a general idea of how precise the measurement is.

DevExtreme HTML5 Charts ErrorBars

Error bars can be generated either from concrete or calculated values. To generate one error bar, two values, high and low, are needed. If the chart data source supplies concrete high and low values, assign the required data source fields to the highValueField and lowValueField properties. To hide individual error bars, set the corresponding low and high values in the data source to null.

Alternatively, error bar values can be calculated according to an algorithm. In this case, use the type property to choose a required algorithm, and use the value property to specify the value to be used in calculation.

NOTE
Error bars are available for axes of the numeric type only.

View Demo

color

Specifies the color of error bars.

Type:

String

Default Value: 'black'

This property supports the following colors:

displayMode

Specifies whether error bars must be displayed in full or partially.

Selector: display-mode
Default Value: 'auto'

This property accepts the following values.

displayMode Result
"auto" Displays error bars in full.
"low" Displays only the lower part of each error bar.
"high" Displays only the higher part of each error bar.
"none" Hides error bars.

edgeLength

Specifies the length of the lines that indicate error bar edges.

Selector: edge-length
Type:

Number

Default Value: 8

A value in the range from 0 to 1 specifies the length relative to the point diameter (for circular series points) or width (for bars).

Any other value specifies the length in pixels.

highValueField

Specifies which data field provides high error values.

Selector: high-value-field
Type:

String

Default Value: undefined

NOTE
If you are using the highValueField property, do not specify the valueErrorBar.type property.

lineWidth

Specifies the width of the error bar line.

Selector: line-width
Type:

Number

Default Value: 2

lowValueField

Specifies which data field provides low error values.

Selector: low-value-field
Type:

String

Default Value: undefined

NOTE
If you are using the lowValueField property, do not specify the valueErrorBar.type property.

opacity

Specifies how trasparent error bars should be.

Type:

Number

Default Value: undefined

This property accepts a value from 0 to 1, where 0 makes error bars completely transparent, and 1 makes them opaque.

type

Specifies how error bar values must be calculated.

Default Value: undefined

Depending on the type of errors you need to visualize, use error bars of one of the following types.

type Description
"percent" Defines the confidential interval in percentages. Error bar values are calculated as a percentage of the series point value. The percentage value is determined by the value property. The high and low error bar values are drawn symmetrically up and down from the series point.
"stdError" For information on the standard error, refer to the article in Wikipedia.
"stdDeviation" For information on the standard deviation, refer to the article in Wikipedia.
"variance" For information on variance, refer to the article in Wikipedia.
"fixed" Defines the confidential interval in constant values. Error bar values are determined by the value property. The high and low error bar values are drawn symmetrically up and down from the series point.

value

Specifies the value to be used for generating error bars.

Type:

Number

Default Value: 1

Depending on the value of the type property, the value property applies as follows.

  • type: 'percent'
    The value property specifies the percentage of the series point value to be taken.

  • type: 'stdError'
    The value property multiplies the calculated standard error.

  • type: 'stdDeviation'
    The value property multiplies the calculated standard deviation.

  • type: 'variance'
    The value property multiplies the calculated variance.

  • type: 'fixed'
    The value property specifies constant error bar values.