Syncfusion Feedback


WPF 50+ Charts Error Bar Chart

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, and trackball.

WPF Error Bar Chart documentation

WPF Error Bar Chart

Key features

WPF Error Bar Chart with Horizontal Bar

Horizontal/Vertical error bar

The WPF Error Bar Chart supports displaying error bars horizontally or vertically. By default, both types are enabled.

WPF Error Bar Chart with Horizontal and Vertical Direction

Directions

The WPF Error Bar Chart allows you to view horizontal and vertical error values in both positive and negative directions.

Different Types of WPF Error Bar Chart

Types

The WPF Error Bar Chart provides four types of error bars: Fixed, Percentage, StandardDeviation, and StandardError.

WPF Error Bar Chart with Customized Horizontal and Vertical Bars

UI styling

The WPF Error Bar Chart allows users to customize the style of the error bar line and its cap. The rendered error bar value of both horizontal and vertical error bars can be customized using the HorizontalErrorPath and VerticalErrorPath properties.

Code example

Easily get started with the WPF Error Bar Chart using a few simple lines of C# code example as demonstrated below,

  1. <Window x:Class="ChartExample.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:ChartExample"
  7.         xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
  8.         mc:Ignorable="d"
  9.         Title="WPF Error Bar Chart" Height="450" Width="700">
  10.     
  11.     <!--Setting DataContext-->
  12.     <Window.DataContext>
  13.         <local:ViewModel/>
  14.     </Window.DataContext>
  15.     
  16.     <StackPanel>
  17.        <chart:SfChart Height="298" Width="353">
  18.             <!--Initialize the horizontal axis for the WPF Chart-->
  19.             <chart:SfChart.PrimaryAxis>
  20.                 <chart:CategoryAxis PlotOffset="12" />
  21.             </chart:SfChart.PrimaryAxis>
  22.  
  23.             <!--Initialize the vertical axis for the WPF Chart-->
  24.             <chart:SfChart.SecondaryAxis>
  25.                 <chart:NumericalAxis />
  26.             </chart:SfChart.SecondaryAxis>
  27.  
  28.             <!--Adding ErrorBar Series to the WPF Chart-->
  29.             <chart:ErrorBarSeries
  30.                 HorizontalErrorPath="HorizontalErrorValue"
  31.                 HorizontalErrorValue="1" 
  32.                 ItemsSource="{Binding EnergyProductions}"  
  33.                 VerticalErrorPath="VerticalErrorValue"
  34.                 VerticalErrorValue="50"
  35.                 XBindingPath="ID"
  36.                 YBindingPath="Coal">
  37.                 </chart:ErrorBarSeries>
  38.             <chart:ScatterSeries
  39.                 ItemsSource="{Binding EnergyProductions}"
  40.                 Label="Coal"
  41.                 ScatterHeight="20"
  42.                 ScatterWidth="20"
  43.                 Interior="#080A52"
  44.                 XBindingPath="ID"
  45.                 YBindingPath="Coal" />
  46.         </chart:SfChart>
  47.     </StackPanel>
  48. </Window>
  1. public class EnergyProduction
  2.     {
  3.         public double ID { get; set; }
  4.         public string Country { get; set; }
  5.         public string Region { get; set; }
  6.         public string Year { get; set; }
  7.  
  8.         public double Nuclear { get; set; }
  9.  
  10.         public double Coal
  11.         {
  12.             get; set;
  13.         }
  14.  
  15.         public double Oil { get; set; }
  16.  
  17.         public double Gas
  18.         {
  19.             get; set;
  20.         }
  21.  
  22.         public double HorizontalErrorValue { get; set; }
  23.  
  24.         public double VerticalErrorValue { get; set; }
  25.     }
  26.  
  27.     public class ViewModel
  28.     { 
  29.         public ObservableCollection<EnergyProduction> EnergyProductions { get; set; }
  30.  
  31.         public ViewModel()
  32.         {
  33.             EnergyProductions = new ObservableCollection<EnergyProduction>();
  34.             EnergyProductions.Add(new EnergyProduction
  35.             {
  36.                 ID = 1,
  37.                 Region = "America",
  38.                 Country = "Canada",
  39.                 Coal = 400,
  40.                 Oil = 100,
  41.                 Gas = 175,
  42.                 Nuclear = 225,
  43.                 VerticalErrorValue = 20,
  44.                 HorizontalErrorValue = 5
  45.             });
  46.             EnergyProductions.Add(new EnergyProduction
  47.             {
  48.                 ID = 2,
  49.                 Region = "Asia",
  50.                 Country = "China",
  51.                 Coal = 925,
  52.                 Oil = 200,
  53.                 Gas = 350,
  54.                 Nuclear = 400,
  55.                 VerticalErrorValue = 30,
  56.                 HorizontalErrorValue = 3
  57.             });
  58.             EnergyProductions.Add(new EnergyProduction
  59.             {
  60.                 ID = 3,
  61.                 Region = "Europe",
  62.                 Country = "Russia",
  63.                 Coal = 550,
  64.                 Oil = 200,
  65.                 Gas = 250,
  66.                 Nuclear = 475,
  67.                 VerticalErrorValue = 28,
  68.                 HorizontalErrorValue = 2
  69.             });
  70.             EnergyProductions.Add(new EnergyProduction
  71.             {
  72.                 ID = 4,
  73.                 Region = "Asia",
  74.                 Country = "Australia",
  75.                 Coal = 450,
  76.                 Oil = 100,
  77.                 Gas = 150,
  78.                 Nuclear = 175,
  79.                 VerticalErrorValue = 20,
  80.                 HorizontalErrorValue = 1
  81.             });
  82.             EnergyProductions.Add(new EnergyProduction
  83.             {
  84.                 ID = 5,
  85.                 Region = "America",
  86.                 Country = "United States",
  87.                 Coal = 800,
  88.                 Oil = 250,
  89.                 Gas = 475,
  90.                 Nuclear = 575,
  91.                 VerticalErrorValue = 40,
  92.                 HorizontalErrorValue = 2.5
  93.             });
  94.             EnergyProductions.Add(new EnergyProduction
  95.             {
  96.                 ID = 6,
  97.                 Region = "Europe",
  98.                 Country = "France",
  99.                 Coal = 375,
  100.                 Oil = 150,
  101.                 Gas = 350,
  102.                 Nuclear = 275,
  103.                 VerticalErrorValue = 55,
  104.                 HorizontalErrorValue = 0.5
  105.             });
  106.             EnergyProductions.Add(new EnergyProduction
  107.             {
  108.                 ID = 7,
  109.                 Region = "Europe",
  110.                 Country = "Itly",
  111.                 Coal = 289,
  112.                 Oil = 150,
  113.                 Gas = 350,
  114.                 Nuclear = 275,
  115.                 VerticalErrorValue = 15,
  116.                 HorizontalErrorValue = 0.11
  117.             });
  118.             EnergyProductions.Add(new EnergyProduction
  119.             {
  120.                 ID = 8,
  121.                 Region = "Asia",
  122.                 Country = "India",
  123.                 Coal = 654,
  124.                 Oil = 150,
  125.                 Gas = 350,
  126.                 Nuclear = 275,
  127.                 VerticalErrorValue = 20,
  128.                 HorizontalErrorValue = 0.4
  129.             });
  130.             EnergyProductions.Add(new EnergyProduction
  131.             {
  132.                 ID = 9,
  133.                 Region = "Asia",
  134.                 Country = "China",
  135.                 Coal = 765,
  136.                 Oil = 180,
  137.                 Gas = 450,
  138.                 Nuclear = 375,
  139.                 VerticalErrorValue = 65,
  140.                 HorizontalErrorValue = 0.2
  141.             });
  142.         }
  143.     }

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

WPF 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

WPF Error Bar Chart API Reference

Explore the WPF Error Bar Chart APIs.

95+ WPF CONTROLS

Scroll up icon
Chat with us