Error Bars

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

To display error bars, either:

Binding Specific Values

The binding of specific high and low values in the Charts requires different approaches when working with:

Categorical Charts

For categorical charts, you can bind the values by specifying the high and low fields from the data through the errorHighField and errorLowField options of the series.

The following example demonstrates how to bind the values for Categorical series.

import {
    Chart,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

const data = [
    { value: 4.743, low: 4.5, high: 5 },
    { value: 7.295, low: 7, high: 8 },
    { value: 6.376, low: 5, high: 6.5 }
];

const ChartContainer = () => (
    <Chart>
        <ChartSeries>
            <ChartSeriesItem type="line" data={data} field="value" errorLowField="low" errorHighField="high" />
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);

Scatter Charts

For scatter charts, you can display error bars both for the X-axis and for the Y-axis values. To bind the values for the X axis, set the xErrorLowField and xErrorHighField options of the series. To bind the values for the Y axis, set the yErrorLowField and yErrorHighField options of the series.

The following example demonstrates how to bind the values for scatter series.

import {
    Chart,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

const data = [
    { x: 6.4, y: 13.4, xLow: 5, xHigh: 7, yLow: 12, yHigh: 14 },
    { x: 1.7, y: 11, xLow: 1, xHigh: 3, yLow: 11, yHigh: 14 },
    { x: 5.4, y: 8, xLow: 3, xHigh: 6, yLow: 5, yHigh: 8 }
];

const ChartContainer = () => (
    <Chart>
        <ChartSeries>
            <ChartSeriesItem
                type="scatterLine"
                data={data}
                xErrorLowField="xLow"
                xErrorHighField="xHigh"
                yErrorLowField="yLow"
                yErrorHighField="yHigh"
            />
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);

Calculating Values Based on Data

The Chart supports the calculation of the low and high values based on the point value.

To specify the way the values are calculated:

Numeric Values

The high and low values are calculated by adding or subtracting the value to the point value.

import {
    Chart,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

const data = [1, 3, 2];
const errorBars = { value: 1 };
const ChartContainer = () => (
    <Chart>
        <ChartSeries>
            <ChartSeriesItem data={data} errorBars={errorBars} />
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);

Array Values

The high and low values are calculated by adding the second element to and subtracting the first element from the point value.

import {
    Chart,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

const data = [1, 3, 2];
const errorBars = { value: [0.5, 1] };
const ChartContainer = () => (
    <Chart>
        <ChartSeries>
            <ChartSeriesItem data={data} errorBars={errorBars} />
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);

Percentage Values

The high and low values are calculated by adding or subtracting the value to a percentage of the point value. To use percentage values, set a string value in the 'percentage(n)' format where n indicates the percentage.

import {
    Chart,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

const data = [1, 3, 2];
const errorBars = { value: 'percentage(20)' };
const ChartContainer = () => (
    <Chart>
        <ChartSeries>
            <ChartSeriesItem data={data} errorBars={errorBars} />
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);

Statistical Values

The error bars support statistical calculations based on the series data.

The available types are:

  • Standard errors. To specify that a standard error will be used, set "stderr" as a value.
  • Population standard deviations. To use a 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.
import {
    Chart,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

const data = [1, 3, 2];
const errorBars = { value: 'percentage(20)' };
const ChartContainer = () => (
    <Chart>
        <ChartSeries>
            <ChartSeriesItem data={data} errorBars={{ value: 'stderr' }} />
            <ChartSeriesItem data={data} errorBars={{ value: 'stddev(0.5)' }} />
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);

Custom Values

If you need a custom algorithm to calculate the high and low value, specify a function. The function is expected to return a valid error bar value and passes an object with the following fields:

  • dataItem—The point data item.
  • value—The point value.
  • category—The point category.
  • index—The point index.
  • series—The series configuration.
import {
    Chart,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

const data = [1, 3, 2];
const errorBars = {
    value: function(data) {
        const value = data.value;
        const lowPercentage = value * 0.05;
        const highPercentage = value * 0.1;

        return [ lowPercentage, highPercentage ];
    }
};
const ChartContainer = () => (
    <Chart>
        <ChartSeries>
            <ChartSeriesItem data={data} errorBars={errorBars} />
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);
 /