We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback


Overview

The WPF error bar chart displays tables of means or medians and variability. The error bars indicate errors or uncertainty in the reported values. This shows possible variations in measurements, and in the chart these values are displayed as data points. The chart supports zooming, scrolling, tooltip, trackball.

Simple and Best error bar chart


Key features

The error bar chart denotes modes of error

Horizontal/Vertical error bar

The WPF error bar chart supports displaying error bars horizontally or vertically. By default, both types are enabled.

The error bar chart  shows the error direction

Directions

The WPF error bar chart allows you to view horizontal and vertical error values in both positive and negative directions.

The error bar chart with available types

Types

The WPF error bar chart provides four types of error bars: Fixed, Percentage, StandardDeviation, and StandardError.

The WPF error bar chart customization

UI styling

The WPF error bar chart provides support to customize the style of the error bar line and its cap. The chart also provides an option to customize the rendered error bar value of both horizontal and vertical error bars with the HorizontalErrorPath and VerticalErrorPath properties.


Code example

<Window x:Class="ChartExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ChartExample"
        xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
        mc:Ignorable="d"
        Title="WPF Error Bar Chart" Height="450" Width="700">
    
    <!--Setting DataContext-->
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    
    <StackPanel>
       <chart:SfChart Height="298" Width="353">
            <!--Initialize the horizontal axis for the WPF Chart-->
            <chart:SfChart.PrimaryAxis>
                <chart:CategoryAxis PlotOffset="12" />
            </chart:SfChart.PrimaryAxis>

            <!--Initialize the vertical axis for the WPF Chart-->
            <chart:SfChart.SecondaryAxis>
                <chart:NumericalAxis />
            </chart:SfChart.SecondaryAxis>

            <!--Adding ErrorBar Series to the WPF Chart-->
            <chart:ErrorBarSeries
                HorizontalErrorPath="HorizontalErrorValue"
                HorizontalErrorValue="1" 
                ItemsSource="{Binding EnergyProductions}"  
                VerticalErrorPath="VerticalErrorValue"
                VerticalErrorValue="50"
                XBindingPath="ID"
                YBindingPath="Coal">
                </chart:ErrorBarSeries>
            <chart:ScatterSeries
                ItemsSource="{Binding EnergyProductions}"
                Label="Coal"
                ScatterHeight="20"
                ScatterWidth="20"
                Interior="#080A52"
                XBindingPath="ID"
                YBindingPath="Coal" />
        </chart:SfChart>
    </StackPanel>
</Window>
public class EnergyProduction
    {
        public double ID { get; set; }
        public string Country { get; set; }
        public string Region { get; set; }
        public string Year { get; set; }

        public double Nuclear { get; set; }

        public double Coal
        {
            get; set;
        }

        public double Oil { get; set; }

        public double Gas
        {
            get; set;
        }

        public double HorizontalErrorValue { get; set; }

        public double VerticalErrorValue { get; set; }
    }

    public class ViewModel
    { 
        public ObservableCollection<EnergyProduction> EnergyProductions { get; set; }

        public ViewModel()
        {
            EnergyProductions = new ObservableCollection<EnergyProduction>();
            EnergyProductions.Add(new EnergyProduction
            {
                ID = 1,
                Region = "America",
                Country = "Canada",
                Coal = 400,
                Oil = 100,
                Gas = 175,
                Nuclear = 225,
                VerticalErrorValue = 20,
                HorizontalErrorValue = 5
            });
            EnergyProductions.Add(new EnergyProduction
            {
                ID = 2,
                Region = "Asia",
                Country = "China",
                Coal = 925,
                Oil = 200,
                Gas = 350,
                Nuclear = 400,
                VerticalErrorValue = 30,
                HorizontalErrorValue = 3
            });
            EnergyProductions.Add(new EnergyProduction
            {
                ID = 3,
                Region = "Europe",
                Country = "Russia",
                Coal = 550,
                Oil = 200,
                Gas = 250,
                Nuclear = 475,
                VerticalErrorValue = 28,
                HorizontalErrorValue = 2
            });
            EnergyProductions.Add(new EnergyProduction
            {
                ID = 4,
                Region = "Asia",
                Country = "Australia",
                Coal = 450,
                Oil = 100,
                Gas = 150,
                Nuclear = 175,
                VerticalErrorValue = 20,
                HorizontalErrorValue = 1
            });
            EnergyProductions.Add(new EnergyProduction
            {
                ID = 5,
                Region = "America",
                Country = "United States",
                Coal = 800,
                Oil = 250,
                Gas = 475,
                Nuclear = 575,
                VerticalErrorValue = 40,
                HorizontalErrorValue = 2.5
            });
            EnergyProductions.Add(new EnergyProduction
            {
                ID = 6,
                Region = "Europe",
                Country = "France",
                Coal = 375,
                Oil = 150,
                Gas = 350,
                Nuclear = 275,
                VerticalErrorValue = 55,
                HorizontalErrorValue = 0.5
            });
            EnergyProductions.Add(new EnergyProduction
            {
                ID = 7,
                Region = "Europe",
                Country = "Itly",
                Coal = 289,
                Oil = 150,
                Gas = 350,
                Nuclear = 275,
                VerticalErrorValue = 15,
                HorizontalErrorValue = 0.11
            });
            EnergyProductions.Add(new EnergyProduction
            {
                ID = 8,
                Region = "Asia",
                Country = "India",
                Coal = 654,
                Oil = 150,
                Gas = 350,
                Nuclear = 275,
                VerticalErrorValue = 20,
                HorizontalErrorValue = 0.4
            });
            EnergyProductions.Add(new EnergyProduction
            {
                ID = 9,
                Region = "Asia",
                Country = "China",
                Coal = 765,
                Oil = 180,
                Gas = 450,
                Nuclear = 375,
                VerticalErrorValue = 65,
                HorizontalErrorValue = 0.2
            });
        }
    }

Learning resources

Navigate to GitHub code used to configure the WPF error bar chart

GitHub Code

The WPF error bar chart configuration code is available in GitHub.

Navigate to the options available in the user guide to customize the WPF error bar chart

Error Bar Chart User Guide

Learn more about the available options to customize WPF error bar charts.

Navigate to the API references documentation of the WPF error bar chart

Error Bar Chart API Reference

Explore the WPF error bar chart APIs.


100+ WPF CONTROLS

Scroll up icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon