Basic Stacked Area
Hover over the image to see the chart animation
Notice this web site wraps every sample using the UserControl class, but LiveCharts controls can be used inside any container,
this sample also follows a Model-View-* pattern.
View model
using System.Collections.Generic;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
namespace ViewModelsSamples.StackedArea.Basic;
public class ViewModel
{
public List<ISeries> Series { get; set; } = new()
{
new StackedAreaSeries<double>
{
Values = new List<double> { 3, 2, 3, 5, 3, 4, 6 }
},
new StackedAreaSeries<double>
{
Values = new List<double> { 6, 5, 6, 3, 8, 5, 2 }
},
new StackedAreaSeries<double>
{
Values = new List<double> { 4, 8, 2, 8, 9, 5, 3 }
}
};
}
XAML
<UserControl x:Class="WPFSample.StackedArea.Basic.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.StackedArea.Basic;assembly=ViewModelsSamples">
<UserControl.DataContext>
<vms:ViewModel/>
</UserControl.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<lvc:CartesianChart Series="{Binding Series}"></lvc:CartesianChart>
</Grid>
</UserControl>
