Basic
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 UserControl instance, but LiveCharts controls can be used inside any container.
View model
using System.Collections.ObjectModel;
using CommunityToolkit.Mvvm.ComponentModel;
using LiveChartsCore;
using LiveChartsCore.Measure;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Painting;
using LiveChartsCore.SkiaSharpView.VisualElements;
using SkiaSharp;
namespace ViewModelsSamples.Polar.Basic;
public partial class ViewModel : ObservableObject
{
public ISeries[] Series { get; set; } =
{
new PolarLineSeries<double>
{
Values = new ObservableCollection<double> { 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 },
DataLabelsPaint = new SolidColorPaint(new SKColor(30, 30, 30)),
GeometrySize = 15,
DataLabelsSize = 8,
DataLabelsPosition = PolarLabelsPosition.Middle,
DataLabelsRotation = LiveCharts.CotangentAngle,
IsClosed = true
}
};
public PolarAxis[] RadialAxes { get; set; } =
{
new PolarAxis
{
LabelsAngle = -60,
MaxLimit = 30 // null to let the chart autoscale (defualt is null) // mark
}
};
public PolarAxis[] AngleAxes { get; set; } =
{
new PolarAxis
{
LabelsRotation = LiveCharts.TangentAngle
}
};
public LabelVisual Title { get; set; } =
new LabelVisual
{
Text = "My chart title",
TextSize = 25,
Padding = new LiveChartsCore.Drawing.Padding(15),
Paint = new SolidColorPaint(SKColors.DarkSlateGray)
};
}
XAML
<UserControl
x:Class="UnoWinUISample.Polar.Basic.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.Polar.Basic"
mc:Ignorable="d">
<UserControl.DataContext>
<vms:ViewModel/>
</UserControl.DataContext>
<Grid>
<lvc:PolarChart
Series="{Binding Series}"
AngleAxes="{Binding AngleAxes}"
RadiusAxes="{Binding RadialAxes}"
Title="{Binding Title}">
</lvc:PolarChart>
</Grid>
</UserControl>
