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.
The WPF Error Bar Chart supports displaying error bars horizontally or vertically. By default, both types are enabled.
The WPF Error Bar Chart allows you to view horizontal and vertical error values in both positive and negative directions.
The WPF Error Bar Chart provides four types of error bars: Fixed, Percentage, StandardDeviation, and StandardError.
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.
Easily get started with the WPF Error Bar Chart using a few simple lines of C# code example as demonstrated below,
<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
});
}
}
The WPF Error Bar Chart configuration code is available in GitHub.
WPF Error Bar Chart User Guide
Learn more about the available options to customize WPF Error Bar Charts.
WPF Error Bar Chart API Reference
Explore the WPF Error Bar Chart APIs.