Basic Bars

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.

sample image sample image

View Model

namespace ViewModelsSamples.Bars.Basic;

public class ViewModel
{
    public double[] MaryValues { get; set; } =
        [2, 5, 4];

    public double[] AnaValues { get; set; } =
        [3, 1, 6];

    public string[] Labels { get; set; } =
        ["Category 1", "Category 2", "Category 3"];
}

XAML

<UserControl x:Class="WPFSample.Bars.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.Bars.Basic;assembly=ViewModelsSamples">

    <UserControl.DataContext>
        <vms:ViewModel/>
    </UserControl.DataContext>

    <lvc:CartesianChart LegendPosition="Right">

        <lvc:CartesianChart.Series>
            <lvc:SeriesCollection>
                <lvc:XamlColumnSeries SeriesName="Mary" Values="{Binding MaryValues}"/>
                <lvc:XamlColumnSeries SeriesName="Ana" Values="{Binding AnaValues}"/>
            </lvc:SeriesCollection>
        </lvc:CartesianChart.Series>

        <!-- We use force to min step to show all the labels always. -->

        <lvc:CartesianChart.XAxes>
            <lvc:AxesCollection>
                <lvc:XamlAxis
                    Labels="{Binding Labels}"
                    LabelsRotation="0"
                    SeparatorsPaint="#c8c8c8"
                    SeparatorsAtCenter="False"
                    TicksPaint="#232323"
                    TicksAtCenter="True"
                    MinStep="1"
                    ForceStepToMin="True"/>
            </lvc:AxesCollection>
        </lvc:CartesianChart.XAxes>

    </lvc:CartesianChart>

</UserControl>

Articles you might also find useful: