Error Bar in .NET MAUI Chart

29 Oct 202420 minutes to read

Error Bar Chart

ErrorBarSeries indicates the errors or uncertainty in reported values. This will find the possible variations in measurements, and in Chart control these values are displayed as data points.
The HorizontalErrorValue and the VerticalErrorValue is used to set the error value(variation) to the series.

NOTE

The Error Bar is not an individual Chart, it associate with a main Chart. Here, we use Scatter Series Chart as Main Chart with the Error Bar Series Chart Support

The following code examples illustrates how to create error bar series:

<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>   

    <chart:ScatterSeries ItemsSource="{Binding EnergyProductions}" 
                         XBindingPath="ID" 
                         YBindingPath="Coal"
                         PointHeight="20"
                         PointWidth="20"/>
    <chart:ErrorBarSeries ItemsSource="{Binding EnergyProductions}"
                          XBindingPath="ID"
                          YBindingPath="Coal"
                          VerticalErrorValue="50"
                          HorizontalErrorValue="0.5"/>

</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();

NumericalAxis primaryAxis = new NumericalAxis();
chart.XAxes.Add(primaryAxis);

NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);

ScatterSeries series = new ScatterSeries()
{
    ItemsSource = new ViewModel().EnergyProductions,
    XBindingPath = "ID",
    YBindingPath = "Coal",
    PointWidth = 20,
    PointHeight = 20
};

ErrorBarSeries errorBar = new ErrorBarSeries()
{
    ItemsSource = new ViewModel().EnergyProductions,
    XBindingPath = "ID",
    YBindingPath = "Coal",
    HorizontalErrorValue = 0.5,
    VerticalErrorValue = 50
};

chart.Series.Add(series);
chart.Series.Add(errorBar);

this.Content = chart;

Error Bar Series in MAUI Chart

Mode

The error bar mode specifies whether the error bar should be drawn horizontally, vertically or both. The Mode property used to switch the error bar mode. By default, the Mode value is Both, which will display both horizontal and vertical error values.

Both

To view both the horizontal and vertical error value, you can set the Mode as Both as shown in the following code example.

<chart:ErrorBarSeries ItemsSource="{Binding EnergyProductions}"
                      XBindingPath="ID"
                      YBindingPath="Coal"
                      VerticalErrorValue="50"
                      HorizontalErrorValue="0.5"
                      Mode="Both">
</chart:ErrorBarSeries>
ErrorBarSeries errorBar = new ErrorBarSeries()
{
    ItemsSource = new ViewModel().EnergyProductions,
    XBindingPath = "ID",
    YBindingPath = "Coal",
    HorizontalErrorValue = 0.5,
    VerticalErrorValue = 50,
    Mode = ErrorBarMode.Both
};

chart.Series.Add(errorBar);

Horizontal Mode Support in Error Bar Series

Horizontal

To view horizontal error value, you can set the Mode as Horizontal as shown in the following code example.

<chart:ErrorBarSeries ItemsSource="{Binding EnergyProductions}"
                      XBindingPath="ID"
                      YBindingPath="Coal"
                      VerticalErrorValue="50"
                      HorizontalErrorValue="0.5"
                      Mode="Horizontal">
</chart:ErrorBarSeries>
ErrorBarSeries errorBar = new ErrorBarSeries()
{
    ItemsSource = new ViewModel().EnergyProductions,
    XBindingPath = "ID",
    YBindingPath = "Coal",
    HorizontalErrorValue = 0.5,
    VerticalErrorValue = 50,
    Mode = ErrorBarMode.Horizontal
};

chart.Series.Add(errorBar);

Horizontal Mode Support in Error Bar Series

Vertical

To view vertical error value, you can set the Mode as Vertical, as shown in the below code example.

<chart:ErrorBarSeries ItemsSource="{Binding EnergyProductions}"
                      XBindingPath="ID"
                      YBindingPath="Coal"
                      VerticalErrorValue="50"
                      HorizontalErrorValue="0.5"
                      Mode="Vertical">              
</chart:ErrorBarSeries>
ErrorBarSeries errorBar = new ErrorBarSeries()
{
    ItemsSource = new ViewModel().EnergyProductions,
    XBindingPath = "ID",
    YBindingPath = "Coal",
    HorizontalErrorValue = 0.5,
    VerticalErrorValue = 50,
    Mode = ErrorBarMode.Vertical
};

chart.Series.Add(errorBar);

Vertical Mode Support in Error Bar Series

Direction

The HorizontalDirection and VerticalDirection specifies whether to show positive, negative, or both directions of error values.

ErrorBarDirection contains below values:

*Both - It indicates the actual data point value along with specific amount of positive and negative error values.

*Plus - It indicates the actual data point value along with specific amount of positive error value.

*Minus- It indicates the actual data point value along with specific amount of negative error value.

The following code illustrates how to set the HorizontalDirection and the VerticalDirection values to error bar chart.

<chart:ErrorBarSeries ItemsSource="{Binding EnergyProductions}"
                      XBindingPath="ID"
                      YBindingPath="Coal"
                      VerticalErrorValue="50"
                      HorizontalErrorValue="0.5"
                      HorizontalDirection="Plus"
                      VerticalDirection="Minus">
</chart:ErrorBarSeries>
ErrorBarSeries errorBar = new ErrorBarSeries()
{
    ItemsSource = new ViewModel().EnergyProductions,
    XBindingPath = "ID",
    YBindingPath = "Coal",
    HorizontalErrorValue = 0.5,
    VerticalErrorValue = 50,
    HorizontalDirection = ErrorBarDirection.Plus,
    VerticalDirection = ErrorBarDirection.Minus,
};

Horizontal Direction as Both in Error Bar Series

Type

The Type property is used to define the error bar type value in Fixed, Custom, Percentage, StandardDeviation, and StandardErrors. The default value of this property is Fixed. For all types, You have to set the values for HorizontalErrorValue and VerticalErrorValue except Custom.

Fixed

<chart:ErrorBarSeries ItemsSource="{Binding EnergyProductions}"
                      XBindingPath="ID"
                      YBindingPath="Coal"
                      VerticalErrorValue="50"
                      HorizontalErrorValue="0.5"
                      Type="Fixed">                             
</chart:ErrorBarSeries>
ErrorBarSeries errorBar = new ErrorBarSeries()
{
    ItemsSource = new ViewModel().EnergyProductions,
    XBindingPath = "ID",
    YBindingPath = "Coal",
    HorizontalErrorValue = 0.5,
    VerticalErrorValue = 50,
    Type = ErrorBarType.Fixed
};

chart.Series.Add(errorBar);

Fixed Type in Error Bar Series

Percentage

<chart:ErrorBarSeries ItemsSource="{Binding EnergyProductions}"
                      XBindingPath="ID"
                      YBindingPath="Coal"
                      VerticalErrorValue="50"
                      HorizontalErrorValue="0.5"
                      Type="Percentage">
</chart:ErrorBarSeries>
ErrorBarSeries errorBar = new ErrorBarSeries()
{
    ItemsSource = new ViewModel().EnergyProductions,
    XBindingPath = "ID",
    YBindingPath = "Coal",
    HorizontalErrorValue = 0.5,
    VerticalErrorValue = 50,
    Type = ErrorBarType.Percentage
};

chart.Series.Add(errorBar);

Percentage Type in Error Bar Series

Standard Error

<chart:ErrorBarSeries ItemsSource="{Binding EnergyProductions}"
                      XBindingPath="ID"
                      YBindingPath="Coal"
                      VerticalErrorValue="50"
                      HorizontalErrorValue="0.5"
                      Type="StandardError">
</chart:ErrorBarSeries>
ErrorBarSeries errorBar = new ErrorBarSeries()
{
    ItemsSource = new ViewModel().EnergyProductions,
    XBindingPath = "ID",
    YBindingPath = "Coal",
    HorizontalErrorValue = 0.5,
    VerticalErrorValue = 50,
    Type = ErrorBarType.StandardError
};

chart.Series.Add(errorBar);

Standard Error Type in Error Bar Series

Standard Deviation

<chart:ErrorBarSeries ItemsSource="{Binding EnergyProductions}"
                      XBindingPath="ID"
                      YBindingPath="Coal"
                      VerticalErrorValue="50"
                      HorizontalErrorValue="0.5"
                      Type="StandardDeviation">
</chart:ErrorBarSeries>
ErrorBarSeries errorBar = new ErrorBarSeries()
{
    ItemsSource = new ViewModel().EnergyProductions,
    XBindingPath = "ID",
    YBindingPath = "Coal",
    HorizontalErrorValue = 0.5,
    VerticalErrorValue = 50,
    Type = ErrorBarType.StandardDeviation
};

chart.Series.Add(errorBar);

Standard Deviation Type in Error Bar Series

Custom

If the Type is Custom, you have to bind the HorizontalErrorPath and the VerticalErrorPath as shown in the following code sample.

<chart:ErrorBarSeries ItemsSource="{Binding EnergyProductions}"
                      XBindingPath="ID"
                      YBindingPath="Coal"
                      VerticalErrorValue="50"
                      HorizontalErrorValue="0.5"
                      Type="Custom"
                      HorizontalErrorPath="HorizontalErrorValue"
                      VerticalErrorPath="VerticalErrorValue">    
</chart:ErrorBarSeries>
ErrorBarSeries errorBar = new ErrorBarSeries()
{
    ItemsSource = new ViewModel().EnergyProductions,
    XBindingPath = "ID",
    YBindingPath = "Coal",
    HorizontalErrorValue = 0.5,
    VerticalErrorValue = 50,
    Type =ErrorBarType.Custom,
    HorizontalErrorPath = "HorizontalErrorValue",
    VerticalErrorPath = "VerticalErrorValue"
};
    
chart.Series.Add(errorBar);

Custom Type in Error Bar Series

Customization

Line Style

You can define the LineStyle for the error bar lines using the HorizontalLineStyle and the VerticalLineStyle properties as in the following code examples.

<chart:ErrorBarSeries ItemsSource="{Binding EnergyProductions}"
                      XBindingPath="ID"
                      YBindingPath="Coal"
                      VerticalErrorValue="50"
                      HorizontalErrorValue="0.5">    

    <chart:ErrorBarSeries.HorizontalLineStyle>
        <chart:ErrorBarLineStyle Stroke="Red"  StrokeWidth="2"/>
    </chart:ErrorBarSeries.HorizontalLineStyle>  

    <chart:ErrorBarSeries.VerticalLineStyle>
        <chart:ErrorBarLineStyle Stroke="Red"  StrokeWidth="2"/>
    </chart:ErrorBarSeries.VerticalLineStyle>        
</chart:ErrorBarSeries>
ErrorBarSeries errorBar = new ErrorBarSeries()
{
    ItemsSource = new ViewModel().EnergyProductions,
    XBindingPath = "ID",
    YBindingPath = "Coal",
    HorizontalErrorValue = 0.5,
    VerticalErrorValue = 50,
};

errorBar.HorizontalLineStyle = new ErrorBarLineStyle()
{
    Stroke = new SolidColorBrush(Colors.Red),
    StrokeWidth = 2
};

errorBar.VerticalLineStyle = new ErrorBarLineStyle()
{
    Stroke = new SolidColorBrush(Colors.Red),
    StrokeWidth = 2
};

Horizontal Line Style in Error Bar Series

Cap Line Style

You can define the CapLineStyle for the error bar lines using the HorizontalCapLineStyle and the VerticalCapLineStyle properties as in the following code examples.

<chart:ErrorBarSeries ItemsSource="{Binding EnergyProductions}"
                      XBindingPath="ID"
                      YBindingPath="Coal"
                      VerticalErrorValue="50"
                      HorizontalErrorValue="0.5">
    <chart:ErrorBarSeries.HorizontalCapLineStyle>
        <chart:ErrorBarCapLineStyle Stroke="Red"  
                                    StrokeWidth="2">
        </chart:ErrorBarCapLineStyle>
    </chart:ErrorBarSeries.HorizontalCapLineStyle>  
    <chart:ErrorBarSeries.VerticalCapLineStyle>
        <chart:ErrorBarCapLineStyle Stroke="Red"  
                                    StrokeWidth="2">
        </chart:ErrorBarCapLineStyle>
    </chart:ErrorBarSeries.VerticalCapLineStyle>  
</chart:ErrorBarSeries>
ErrorBarSeries errorBar = new ErrorBarSeries()
{
    ItemsSource = new ViewModel().EnergyProductions,
    XBindingPath = "ID",
    YBindingPath = "Coal",
    HorizontalErrorValue = 0.5,
    VerticalErrorValue = 50,
};

errorBar.HorizontalCapLineStyle = new ErrorBarCapLineStyle()
{
    Stroke = new SolidColorBrush(Colors.Red),
    StrokeWidth = 2
};

errorBarSeries.VerticalCapLineStyle = new ErrorBarCapLineStyle()
{
    Stroke = new SolidColorBrush(Colors.Red),
    StrokeWidth = 2
};

Horizontal Cap Line Style in Error Bar Series