Custom 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.

This web site wraps every sample using a UserControl instance, but LiveCharts controls can be used inside any container.

sample image

View model

using LiveChartsCore.Drawing;

namespace ViewModelsSamples.Bars.Custom;

public class ViewModel
{
    public double[] Values1 { get; } = [2, 1, 4];
    public double[] Values2 { get; } = [4, 3, 6];
    public double[] Values3 { get; } = [-2, 2, 1];
    public double[] Values4 { get; } = [1, 2, 3];
    public string StarPath { get; } = SVGPoints.Star;
}

MyGeometry.cs

using LiveChartsCore.Drawing;
using LiveChartsCore.SkiaSharpView.Drawing;

namespace ViewModelsSamples.Bars.Custom;

public class MyGeometry : BoundedDrawnGeometry, IDrawnElement<SkiaSharpDrawingContext>
{
    public void Draw(SkiaSharpDrawingContext context)
    {
        var paint = context.ActiveSkiaPaint;
        var canvas = context.Canvas;
        var y = Y;

        while (y < Y + Height)
        {
            canvas.DrawLine(X, y, X + Width, y, paint);
            y += 5;
        }
    }
}

XAML

<UserControl
    x:Class="WinUISample.Bars.Custom.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.Bars.Custom"
    xmlns:svg="using:LiveChartsCore.Drawing"
    xmlns:local="using:WinUISample.Bars.Custom"
    mc:Ignorable="d">

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

    <lvc:CartesianChart>
        <lvc:CartesianChart.Series>
            <lvc:SeriesCollection>
                <lvc:XamlColumnSeries Values="{Binding Values1}"/>
                <!--
                The DiamondColumnSeries is a custom series that draws a diamond shape
                -->
                <local:DiamondColumnSeries Values="{Binding Values2}"/>
                <!--
                You can also use SVG paths to draw the geometry
                the VariableSVGPathGeometry can change the drawn path at runtime
                -->
                <local:SvgColumnSeries GeometrySvg="{Binding StarPath}" Values="{Binding Values3}"/>
                <!--
                Finally you can also use SkiaSharp to draw your own geometry
                -->
                <local:MyGeometryColumnSeries Values="{Binding Values4}"/>
            </lvc:SeriesCollection>
        </lvc:CartesianChart.Series>
    </lvc:CartesianChart>
</UserControl>

Articles you might also find useful:

Cartesian chart control
Column series properties