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.

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="WPFSample.Bars.Custom.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.Custom;assembly=ViewModelsSamples"
    xmlns:local="clr-namespace:WPFSample.Bars.Custom">

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

    <lvc:CartesianChart>
        <lvc:CartesianChart.Series>
            <lvc:SeriesCollection>
                <lvc:XamlColumnSeries Values="{Binding Values1}"/>
                <!--
                The DiamondColumnSeries is a column 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:VariableSVGPathColumnSeries
                    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>

LogarithmicSeries.cs

using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.WPF;
using LiveChartsCore.SkiaSharpView.Drawing.Geometries;
using ViewModelsSamples.Bars.Custom;

namespace WPFSample.Bars.Custom;

// WPF xaml parser does not support generic types
// we instead create a non-generic class that inherits from the generic one.
public class DiamondColumnSeries : XamlColumnSeries<double, DiamondGeometry> { }
public class VariableSVGPathColumnSeries : XamlColumnSeries<double, VariableSVGPathGeometry> { }
public class MyGeometryColumnSeries : XamlColumnSeries<double, MyGeometry> { }

Articles you might also find useful:

Cartesian chart control