Dashed Lines
Hover over the image to see the chart animation
The [ObservableObject]
, [ObservableProperty]
and [RelayCommand]
attributes come from the
CommunityToolkit.Mvvm package, you can read more about it
here.
View Model
using CommunityToolkit.Mvvm.ComponentModel;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Painting;
using LiveChartsCore.SkiaSharpView.Painting.Effects;
using SkiaSharp;
namespace ViewModelsSamples.Design.StrokeDashArray;
public partial class ViewModel : ObservableObject
{
public ViewModel()
{
// The LiveChartsCore.SkiaSharpView.Painting.EffectsPathEffect abstract class is a wrapper for
// the SkiaSharp.SKPathEffect object, in this case we will use the DashEffect class
// to create a dash line as the stroke of our line series
// notice the stroke thickness affects the stroke dash array
// if you want to learn more about stroke dash arrays please see:
// https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/curves/effects#dots-and-dashes
var strokeThickness = 10;
var strokeDashArray = new float[] { 3 * strokeThickness, 2 * strokeThickness };
var effect = new DashEffect(strokeDashArray);
Series = new ISeries[]
{
new LineSeries<int>
{
Values = new [] { 4, 2, 8, 5, 3 },
LineSmoothness = 1,
GeometrySize = 22,
Stroke = new SolidColorPaint
{
Color = SKColors.CornflowerBlue,
StrokeCap = SKStrokeCap.Round,
StrokeThickness = strokeThickness,
PathEffect = effect
},
Fill = null
}
};
}
public ISeries[] Series { get; set; }
}
XAML
<UserControl x:Class="WPFSample.Design.StrokeDashArray.View"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"
xmlns:vms="clr-namespace:ViewModelsSamples.Design.StrokeDashArray;assembly=ViewModelsSamples">
<UserControl.DataContext>
<vms:ViewModel/>
</UserControl.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<lvc:CartesianChart Series="{Binding Series}"></lvc:CartesianChart>
</Grid>
</UserControl>