Error Bars

The error bars enable you to indicate the variability of the Chart data.

The error bars are available for the following Chart series types:

  • Area
  • Vertical Area
  • Column
  • Bar
  • Line
  • Vertical Line
  • Scatter
  • ScatterLine

The error bars support statistical calculations based on the series data. The supported types represent standard error and population standard deviation.

To configure the error bars, use the :series-error-bars prop. To indicate that the Chart will use standard error, set stderr as a value.

<div id="vueapp" class="vue-app">
    <kendo-chart :title-text="'Gross domestic product growth and standard error'"
                 :legend-visible="false"
                 :series-defaults-type="'column'"
                 :series="series"
                 :category-axis="categoryAxis"
                 :value-axis="valueAxis"
                 :tooltip="tooltip"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            series: [{
                data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3],
                errorBars: {
                    value: "stderr"
                }
            }],
            valueAxis: [{
                labels: {
                    format: "{0}%"
                },
                line: {
                    visible: false
                },
                axisCrossingValue: 0
            }],
            categoryAxis: {
                categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
                line: {
                    visible: false
                },
                labels: {
                    padding: { top: 160 }
                }
            },
            tooltip: {
                visible: true,
                template: "{0}%"
            }
        }
    }
})

In this article