Multiple Axes
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.Multiple;
public class ViewModel
{
public double[] Values1 { get; set; } = [14, 13, 14, 15, 17];
public double[] Values2 { get; set; } = [11, 12, 13, 10, 13];
public double[] Values3 { get; set; } = [533, 586, 425, 579, 518];
public double[] Values4 { get; set; } = [5493, 7843, 4368, 9018, 3902];
}
XAML
<UserControl
x:Class="WinUISample.Axes.Multiple.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.Multiple"
mc:Ignorable="d">
<UserControl.DataContext>
<vms:ViewModel/>
</UserControl.DataContext>
<UserControl.Resources>
<x:String x:Key="blue">#1976D2</x:String>
<x:String x:Key="red">#E53935</x:String>
<x:String x:Key="yellow">#C6A700</x:String>
</UserControl.Resources>
<lvc:CartesianChart
LegendBackgroundPaint="{lvc:SolidColorPaint Color='#eee', FontFamily='Courier New'}"
LegendTextPaint="{lvc:SolidColorPaint Color='#323232'}"
LegendTextSize="16"
LegendPosition="Left">
<lvc:CartesianChart.Resources>
<Style TargetType="lvc:XamlLineSeries">
<Setter Property="GeometrySize" Value="10"/>
<Setter Property="Fill" Value="{x:Null}"/>
<Setter Property="LineSmoothness" Value="1"/>
</Style>
<Style TargetType="lvc:XamlAxis">
<Setter Property="NameTextSize" Value="14"/>
<Setter Property="NamePadding" Value="{lvc:Padding Value='0,20'}"/>
<Setter Property="TextSize" Value="12"/>
<Setter Property="DrawTicksPath" Value="True"/>
</Style>
</lvc:CartesianChart.Resources>
<!--
The ScaleYAt property is used to assign a series to a specific Y axis.
-->
<lvc:CartesianChart.Series>
<lvc:SeriesCollection>
<lvc:XamlLineSeries
SeriesName="Tens"
Values="{Binding Values1}"
Stroke="{lvc:SolidColorPaint Color={StaticResource blue}, StrokeWidth=2}"
GeometryStroke="{lvc:SolidColorPaint Color={StaticResource blue}, StrokeWidth=2}"
ScalesYAt="0"/>
<lvc:XamlLineSeries
SeriesName="Tens 2"
Values="{Binding Values2}"
Stroke="{lvc:SolidColorPaint Color={StaticResource blue}, StrokeWidth=2}"
GeometryStroke="{lvc:SolidColorPaint Color={StaticResource blue}, StrokeWidth=2}"
ScalesYAt="0"/>
<lvc:XamlLineSeries
SeriesName="Hundreds"
Values="{Binding Values3}"
Stroke="{lvc:SolidColorPaint Color={StaticResource red}, StrokeWidth=2}"
GeometryStroke="{lvc:SolidColorPaint Color={StaticResource red}, StrokeWidth=2}"
ScalesYAt="1"/>
<lvc:XamlLineSeries
SeriesName="Thousands"
Values="{Binding Values4}"
Stroke="{lvc:SolidColorPaint Color={StaticResource yellow}, StrokeWidth=2}"
GeometryStroke="{lvc:SolidColorPaint Color={StaticResource yellow}, StrokeWidth=2}"
ScalesYAt="2"/>
</lvc:SeriesCollection>
</lvc:CartesianChart.Series>
<lvc:CartesianChart.YAxes>
<lvc:AxesCollection>
<lvc:XamlAxis
AxisName="Tens"
Padding="{lvc:Padding Value='0, 0, 20, 0'}"
NamePaint="{lvc:SolidColorPaint Color={StaticResource blue}}"
LabelsPaint="{lvc:SolidColorPaint Color={StaticResource blue}}"
TicksPaint="{lvc:SolidColorPaint Color={StaticResource blue}}"
SubticksPaint="{lvc:SolidColorPaint Color={StaticResource blue}}"/>
<lvc:XamlAxis
AxisName="Hundreds"
Padding="{lvc:Padding Value='20, 0, 0, 0'}"
Position="End"
ShowSeparatorLines="False"
NamePaint="{lvc:SolidColorPaint Color={StaticResource red}}"
LabelsPaint="{lvc:SolidColorPaint Color={StaticResource red}}"
TicksPaint="{lvc:SolidColorPaint Color={StaticResource red}}"
SubticksPaint="{lvc:SolidColorPaint Color={StaticResource red}}"/>
<lvc:XamlAxis
AxisName="Thousands"
Padding="{lvc:Padding Value='20, 0, 0, 0'}"
Position="End"
ShowSeparatorLines="False"
NamePaint="{lvc:SolidColorPaint Color={StaticResource yellow}}"
LabelsPaint="{lvc:SolidColorPaint Color={StaticResource yellow}}"
TicksPaint="{lvc:SolidColorPaint Color={StaticResource yellow}}"
SubticksPaint="{lvc:SolidColorPaint Color={StaticResource yellow}}"/>
</lvc:AxesCollection>
</lvc:CartesianChart.YAxes>
</lvc:CartesianChart>
</UserControl>
