Error Bars
The Chart enables you to implement error bars which show the variability of data.
The low and high value for the error bars can be either bound to the data or calculated from the point or series values. The error bars are specified as part of the series definition.
The following series types support error bars:
- Area
- Vertical Area
- Column
- Bar
- Line
- Vertical Line
- Scatter
- ScatterLine
Binding to Categorical Series
To bind the low and high values of the error bars when using categorical series, set the ErrorLowField and ErrorHighField options to the fields in the data that hold the low and high value.
@(Html.Kendo().Chart()
.Name("chart")
.Series(s => s
.Column(new object[] {
new {
value = 4.743,
low = 4.5,
high = 5
},
new {
value = 7.295,
low = 7,
high = 8
},
new {
value = 6.376,
low = 5,
high = 6.5
}
})
.ErrorLowField("low")
.ErrorHighField("high")
)
)
@addTagHelper *, Kendo.Mvc
@{
var column_data = new object[] {
new {
value = 4.743,
low = 4.5,
high = 5
},
new {
value = 7.295,
low = 7,
high = 8
},
new {
value = 6.376,
low = 5,
high = 6.5
}
};
}
<kendo-chart name="chart">
<series>
<series-item type="ChartSeriesType.Column" data="column_data" error-low-field="low" error-high-field="high">
</series-item>
</series>
</kendo-chart>
Binding to Scatter Series
You can also display error bars for the series x or y value, or both. To set the low and high fields for the series x value, set the XErrorLowField and XErrorHighField series options. To specify the low and high fields for the y value of the series, use the YErrorLowField and YErrorHighField options.
The following example demonstrates how to bind the error bars for the x value of the series.
@(Html.Kendo().Chart()
.Name("chart")
.Series(s => s
.Scatter(new object[] {
new {
x= 6.4,
y= 13.4,
low= 5,
high= 7
},
new {
x= 1.7,
y= 11,
low= 1,
high= 3
}, new {
x= 5.4,
y= 8,
low= 3,
high= 6}
})
.XErrorLowField("low")
.XErrorHighField("high")
)
)
@addTagHelper *, Kendo.Mvc
@{
var scatter_data = new object[] {
new {
x= 6.4,
y= 13.4,
low= 5,
high= 7
},
new {
x= 1.7,
y= 11,
low= 1,
high= 3
},
new {
x= 5.4,
y= 8,
low= 3,
high= 6
}
};
}
<kendo-chart name="chart">
<series>
<series-item type="ChartSeriesType.Scatter" data="scatter_data" x-error-low-field="low" x-error-high-field="high">
</series-item>
</series>
</kendo-chart>
The following example demonstrates how to bind the error bars for the y value of the series.
@(Html.Kendo().Chart()
.Name("chart")
.Series(s => s
.Scatter(new object[] {
new {
x= 6.4,
y= 13.4,
low= 12,
high= 17
},
new {
x= 1.7,
y= 11,
low= 11,
high= 14
}, new {
x= 5.4,
y= 8,
low= 5,
high= 8}
})
.YErrorLowField("low")
.YErrorHighField("high")
)
)
@addTagHelper *, Kendo.Mvc
@{
var scatter_data = new object[] {
new {
x= 6.4,
y= 13.4,
low= 12,
high= 17
},
new {
x= 1.7,
y= 11,
low= 11,
high= 14
},
new {
x= 5.4,
y= 8,
low= 5,
high= 8
}
};
}
<kendo-chart name="chart">
<series>
<series-item type="ChartSeriesType.Scatter" data="scatter_data" y-error-low-field="low" y-error-high-field="high">
</series-item>
</series>
</kendo-chart>
Setting the Error Bar Values
You can calculate the low and high values of the error bars based on the series point values. To set the error bars value for categorical series, specify the ErrorBars.Value option. For scatter series, set the ErrorBars.XValue or ErrorBars.YValue options, or both.
Setting Numeric Values
If the value of the error bar is set to a number (must not be negative), the low and high value are calculated by subtracting or adding the value to the series value.
The following example demonstrates how to set a numeric value for the categorical series.
@(Html.Kendo().Chart()
.Name("chart")
.Series(s => s
.Column(new object[] {
new {
value = 4.743
},
new {
value = 7.295
},
new {
value = 6.376
}
})
.ErrorBars(err => err.Value("1"))
)
)
@addTagHelper *, Kendo.Mvc
@{
var column_data = new object[] {
new {
value = 4.743
},
new {
value = 7.295
},
new {
value = 6.376
}
};
}
<kendo-chart name="chart">
<series>
<series-item type="ChartSeriesType.Column" data="column_data">
<error-bars value="1"/>
</series-item>
</series>
</kendo-chart>
The following example demonstrates how to set a numeric value for the scatter series.
@(Html.Kendo().Chart()
.Name("chart")
.Series(s => s
.Scatter(new object[] {
new {
x = 6.4,
y = 13.4
},
new {
x = 1.7,
y = 11
},
new {
x = 5.4,
y = 8
}
})
.ErrorBars(err => err.YValue("1"))
)
)
@addTagHelper *, Kendo.Mvc
@{
var scatter_data = new object[] {
new {
x= 6.4,
y= 13.4
},
new {
x= 1.7,
y= 11
},
new {
x= 5.4,
y= 8
}
};
}
<kendo-chart name="chart">
<series>
<series-item type="ChartSeriesType.Scatter" data="scatter_data">
<error-bars y-value="1"/>
</series-item>
</series>
</kendo-chart>
Setting Percentage Values
You can also set the difference of the point value as percentage by setting a string value in the "percenatage(n)" format where n indicates the percent value.
@(Html.Kendo().Chart()
.Name("chart")
.Series(s => s
.Column(new object[] {
new {
value = 4.743
},
new {
value = 7.295
},
new {
value = 6.376
}
})
)
.ErrorBars(err => err.Value("percentage(20)"))
)
@addTagHelper *, Kendo.Mvc
@{
var column_data = new object[] {
new {
value = 4.743
},
new {
value = 7.295
},
new {
value = 6.376
}
};
}
<kendo-chart name="chart">
<series>
<series-item type="ChartSeriesType.Column" data="column_data">
<error-bars value="percentage(20)"/>
</series-item>
</series>
</kendo-chart>
Setting Statistical Values
The error bars support statistical calculations based on the series data. The supported types are the standard error and population standard deviation. To specify that the standard error has to be used, set "stderr" as a value. To use standard deviation, set "stddev" with an optional number between parentheses appended at the end. The number will be multiplied by the calculated standard deviation value.
The following example demonstrates how to use the standard error type.
@(Html.Kendo().Chart()
.Name("chart")
.Series(s => s
.Column(new object[] {
new {
value = 4.743
},
new {
value = 7.295
},
new {
value = 6.376
}
})
)
.ErrorBars(err => err.Value("stderr"))
)
@addTagHelper *, Kendo.Mvc
@{
var column_data = new object[] {
new {
value = 4.743
},
new {
value = 7.295
},
new {
value = 6.376
}
};
}
<kendo-chart name="chart">
<series>
<series-item type="ChartSeriesType.Column" data="column_data">
<error-bars value="stderr"/>
</series-item>
</series>
</kendo-chart>
The following example demonstrates how to use the standard deviation type.
@(Html.Kendo().Chart()
.Name("chart")
.Series(s => s
.Column(new object[] {
new {
value = 4.743
},
new {
value = 7.295
},
new {
value = 6.376
}
})
)
.ErrorBars(err => err.Value("stddev(0.5)"))
)
@addTagHelper *, Kendo.Mvc
@{
var column_data = new object[] {
new {
value = 4.743
},
new {
value = 7.295
},
new {
value = 6.376
}
};
}
<kendo-chart name="chart">
<series>
<series-item type="ChartSeriesType.Column" data="column_data">
<error-bars value="stddev(0.5)"/>
</series-item>
</series>
</kendo-chart>
Calculating Low and High Values
If you need a custom algorithm to calculate the low and high value, specify a function. The function accepts an object and returns a valid error bar value.
The following fields are available as object parameters:
-
dataItem—The point data item. -
value—The point value. -
index—The point index in the series data. -
category—The point category value if a categorical chart is used. -
series—The series configuration.
The following example demonstrates how to use different percentages for the low and high values.
@(Html.Kendo().Chart()
.Name("chart")
.Series(s => s
.Column(new object[] {
new {
value = 4.743
},
new {
value = 7.295
},
new {
value = 6.376
}
})
)
.ErrorBars(err => err.ValueHandler("calculateError"))
)
@addTagHelper *, Kendo.Mvc
@{
var column_data = new object[] {
new {
value = 4.743
},
new {
value = 7.295
},
new {
value = 6.376
}
};
}
<kendo-chart name="chart">
<series>
<series-item type="ChartSeriesType.Column" data="column_data">
<error-bars value-handler="calculateError"/>
</series-item>
</series>
</kendo-chart>
function calculateError(data) {
var value = data.value;
var lowPercentage = value * 0.05;
var highPercentage = value * 0.1;
return [lowPercentage, highPercentage];
}