Error Bars
The [ObservableObject], [ObservableProperty] and [RelayCommand] attributes come from the
CommunityToolkit.Mvvm package, you can read more about it
here.
This web site wraps every sample using a ContentPage instance, but LiveCharts controls can be used inside any container.
View model
using System;
using LiveChartsCore.Defaults;
namespace ViewModelsSamples.Error.Basic;
public class ViewModel
{
public ErrorValue[] Values1 { get; set; } =
[
// (Y, Y+- error) // mark
new(65, 6),
// (Y, Y+ error, Y- error) // mark
new(70, 15, 4),
new(35, 4),
new(70, 6),
new(30, 5),
new(60, 4, 16),
new(65, 6)
];
public ErrorPoint[] Values2 { get; set; } =
[
// (X, Y, Y+- error, Y+- error) // mark
new(0, 50, 0.2, 8),
// (X, Y, X- error, X+ erorr, Y+ error, Y- error) // mark
new(1, 45, 0.1, 0.3, 15, 4),
new(2, 25, 0.3, 4),
new(3, 30, 0.2, 6),
new(4, 70, 0.2, 8),
new(5, 30, 0.4, 4),
new(6, 50, 0.3, 6)
];
public ErrorDateTimePoint[] Values3 { get; set; } =
[
// (X, Y, Y+- error, Y+- error) // mark
new(DateTime.Today.AddDays(0), 50, 0.2, 8),
// (X, Y, X- error, X+ erorr, Y+ error, Y- error) // mark
new(DateTime.Today.AddDays(1), 45, 0.1, 0.3, 15, 4),
new(DateTime.Today.AddDays(2), 25, 0.3, 4),
new(DateTime.Today.AddDays(3), 30, 0.2, 6),
new(DateTime.Today.AddDays(4), 70, 0.2, 8),
new(DateTime.Today.AddDays(5), 30, 0.4, 4),
new(DateTime.Today.AddDays(6), 50, 0.3, 6)
];
public Func<DateTime, string> Formatter { get; set; } =
date => date.ToString("MMMM dd");
}
XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="MauiSample.Error.Basic.View"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Maui;assembly=LiveChartsCore.SkiaSharpView.Maui"
xmlns:vms="clr-namespace:ViewModelsSamples.Error.Basic;assembly=ViewModelsSamples"
x:DataType="vms:ViewModel">
<ContentPage.BindingContext>
<vms:ViewModel/>
</ContentPage.BindingContext>
<Grid RowDefinitions="*,*,*">
<lvc:CartesianChart Grid.Row="0">
<lvc:CartesianChart.Series>
<lvc:SeriesCollection>
<lvc:XamlColumnSeries
Values="{Binding Values1}"
ShowError="True"
Padding="0"/>
<lvc:XamlColumnSeries
Values="{Binding Values2}"
ShowError="True"
Padding="0"/>
</lvc:SeriesCollection>
</lvc:CartesianChart.Series>
</lvc:CartesianChart>
<lvc:CartesianChart Grid.Row="1">
<lvc:CartesianChart.Series>
<lvc:SeriesCollection>
<lvc:XamlLineSeries
Values="{Binding Values1}"
ShowError="True"
GeometrySize="4"
Fill="{x:Null}"/>
</lvc:SeriesCollection>
</lvc:CartesianChart.Series>
</lvc:CartesianChart>
<lvc:CartesianChart Grid.Row="2">
<lvc:CartesianChart.Series>
<lvc:SeriesCollection>
<lvc:XamlScatterSeries
Values="{Binding Values3}"
ShowError="True"
GeometrySize="10"/>
</lvc:SeriesCollection>
</lvc:CartesianChart.Series>
<lvc:CartesianChart.XAxes>
<lvc:AxesCollection>
<!--
To get more help about DateTime axes see:
https://livecharts.dev/docs/{{ platform }}/{{ version }}/samples.axes.dateTimeScaled
-->
<lvc:XamlDateTimeAxis
Interval="1.00:00:00"
DateFormatter="{Binding Formatter}"/>
</lvc:AxesCollection>
</lvc:CartesianChart.XAxes>
</lvc:CartesianChart>
</Grid>
</ContentPage>
