LiveCharts - LiveCharts2[
^] is very simple to use. The documentation is very good with code samples given.
From their documentation, ref:
samples.bars.withBackground - LiveCharts2[
^]
1. ViewModel
using CommunityToolkit.Mvvm.ComponentModel;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Painting;
using SkiaSharp;
namespace ViewModelsSamples.Bars.WithBackground;
[ObservableObject]
public partial class ViewModel
{
public ISeries[] Series { get; set; } =
{
new ColumnSeries<double>
{
IsHoverable = false,
Values = new double[] { 10, 10, 10, 10, 10, 10, 10 },
Stroke = null,
Fill = new SolidColorPaint(new SKColor(30, 30, 30, 30)),
IgnoresBarPosition = true
},
new ColumnSeries<double>
{
Values = new double[] { 3, 10, 5, 3, 7, 3, 8 },
Stroke = null,
Fill = new SolidColorPaint(SKColors.CornflowerBlue),
IgnoresBarPosition = true
}
};
public Axis[] YAxes { get; set; } =
{
new Axis { MinLimit = 0, MaxLimit = 10 }
};
}
2. USerControl:
<UserControl x:Class="WPFSample.Bars.WithBackground.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.Bars.WithBackground;assembly=ViewModelsSamples">
<UserControl.DataContext>
<vms:ViewModel/>
</UserControl.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<lvc:CartesianChart Series="{Binding Series}" YAxes="{Binding YAxes}"></lvc:CartesianChart>
</Grid>
</UserControl>
If you are stuck with implementing the above code, download their repo and there are WPF (and others) samples that you can simply run, including bar charts:
LiveCharts2 - Github[
^]
[UPDATE]
Here is an updated version of the code above bound to the code behind:
1. Code Behind:
using CommunityToolkit.Mvvm.ComponentModel;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Painting;
using SkiaSharp;
using System.Windows;
namespace WpfLiveCharts2CodeBehind;
[ObservableObject]
public partial class MainWindow : Window
{
public MainWindow() => InitializeComponent();
public ISeries[] Series { get; set; } =
{
new ColumnSeries<double>
{
IsHoverable = false,
Values = new double[] { 10, 10, 10, 10, 10, 10, 10 },
Stroke = null,
Fill = new SolidColorPaint(new SKColor(30, 30, 30, 30)),
IgnoresBarPosition = true
},
new ColumnSeries<double>
{
Values = new double[] { 3, 10, 5, 3, 7, 3, 8 },
Stroke = null,
Fill = new SolidColorPaint(SKColors.CornflowerBlue),
IgnoresBarPosition = true
}
};
public Axis[] YAxes { get; set; } =
{
new Axis { MinLimit = 0, MaxLimit = 10 }
};
}
2. The Window:
<Window x:Class="WpfLiveCharts2CodeBehind.MainWindow"
x:Name="Window"
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:local="clr-namespace:WpfLiveCharts2CodeBehind"
xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid DataContext="{Binding ElementName=Window}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<lvc:CartesianChart Series="{Binding Series}"
YAxes="{Binding YAxes}"
/>
</Grid>
</Window>
Breakdown:
1. Give the
Window
a name:
<Window ... x:Name="Window" ...>
2. DataBind to the Window's Name:
DataContext="{Binding ElementName=Window}"