DevExtreme jQuery - Error Bars
Error bars are used on charts to indicate an error or uncertainty in a reported measurement. They give a general idea of how precise the measurement is.
Error bars can be generated either from concrete or calculated values. To generate one error bar, two values, high and low, are needed. If your data source provides concrete high and low values, assign the required data source fields to the highValueField and lowValueField options of the series.valueErrorBar object.
jQuery
$(function() {
$("#chartContainer").dxChart({
// ...
dataSource: [
{ arg: 1, val: 200, highError: 5, lowError: 3 },
// ...
],
series: {
// ...
valueErrorBar: {
highValueField: 'highError',
lowValueField: 'lowError'
}
}
});
});Angular
<dx-chart [dataSource]="chartDataSource">
<dxi-series ... >
<dxo-value-error-bar
highValueField="highError"
lowValueField="lowError">
</dxo-value-error-bar>
</dxi-series>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
chartDataSource = [
{ arg: 1, val: 200, highError: 5, lowError: 3 },
// ...
]
}
@NgModule({
imports: [
// ...
DxChartModule
],
// ...
})Alternatively, error bar values can be calculated according to an algorithm. In this case, choose the needed algorithm using the type option and specify the value to be used in calculation using the value option.
jQuery
$(function() {
$("#chartContainer").dxChart({
// ...
series: {
// ...
valueErrorBar: {
type: 'percent',
value: 5
}
}
});
});Angular
<dx-chart ... >
<dxi-series ... >
<dxo-value-error-bar
type="percent"
[value]="5">
</dxo-value-error-bar>
</dxi-series>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxChartModule
],
// ...
})If error bars should have uniform settings, you can specify them using one of the following objects.
commonSeriesSettings.%seriesType%.valueErrorBar
Settings for all error bars belonging to the series of a specific type (line, bar, etc.).commonSeriesSettings.valueErrorBar
Settings for all error bars in the Chart.
Note that settings for individual series override type-specific settings which, in turn, override common settings.
jQuery
$(function() {
$("#chartContainer").dxChart({
// ...
series: {
valueErrorBar: {
// high priority
}
},
commonSeriesSettings: {
line: {
valueErrorBar: {
// middle priority
}
},
valueErrorBar: {
// low priority
}
}
});
});Angular
<dx-chart ... >
<dxi-series>
<dxo-value-error-bar>
<!-- high priority -->
</dxo-value-error-bar>
</dxi-series>
<dxo-common-series-settings>
<dxo-line>
<dxo-value-error-bar>
<!-- middle priority -->
</dxo-value-error-bar>
</dxo-line>
<dxo-value-error-bar>
<!-- low priority -->
</dxo-value-error-bar>
</dxo-common-series-settings>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxChartModule
],
// ...
})For information about all options of the error bars, visit the valueErrorBar section of the API reference.