Custom Separators Interval
This sample uses C# 13 preview features such as partial properties, it also uses features from the CommunityToolkit.Mvvm package, you can learn more about it here.
This web site wraps every sample using a UserControl instance, but LiveCharts controls can be used inside any container.
View model
namespace ViewModelsSamples.Axes.CustomSeparatorsInterval;
public class ViewModel
{
public int[] Values { get; set; } =
[10, 55, 45, 68, 60, 70, 75, 78];
public double[] CustomSeparators { get; set; } =
[0, 10, 25, 50, 100];
}
XAML
<UserControl
x:Class="WinUISample.Axes.CustomSeparatorsInterval.View"
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:lvc="using:LiveChartsCore.SkiaSharpView.WinUI"
xmlns:vms="using:ViewModelsSamples.Axes.CustomSeparatorsInterval"
mc:Ignorable="d">
<UserControl.DataContext>
<vms:ViewModel/>
</UserControl.DataContext>
<lvc:CartesianChart>
<lvc:CartesianChart.Series>
<lvc:SeriesCollection>
<lvc:XamlLineSeries Values="{Binding Values}"/>
</lvc:SeriesCollection>
</lvc:CartesianChart.Series>
<!--
CustomSeparators allows you to define the exact values where separators will be drawn.
-->
<lvc:CartesianChart.YAxes>
<lvc:AxesCollection>
<lvc:XamlAxis
CustomSeparators="{Binding CustomSeparators}"
MinLimit="0"
MaxLimit="100"
SeparatorsPaint="{lvc:SolidColorPaint Color='#64b4b4b4'}"/>
</lvc:AxesCollection>
</lvc:CartesianChart.YAxes>
</lvc:CartesianChart>
</UserControl>
