Logarithmic Scale

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 System;
using LiveChartsCore;

namespace ViewModelsSamples.Axes.Logarithmic;

public class ViewModel
{
    public ViewModel()
    {
        LiveCharts.Configure(config =>
            config.HasMap<LogarithmicPoint>(
                (logPoint, index) => new(logPoint.X, Math.Log(logPoint.Y, LogBase))));
    }

    // base 10 log, change the base if you require it.
    // or use any custom scale the logic is the same.
    public double LogBase { get; set; } = 10;

    public LogarithmicPoint[] Values { get; set; } = [
        new(1, 1),
        new(2, 10),
        new(3, 100),
        new(4, 1000),
        new(5, 10000),
        new(6, 100000),
        new(7, 1000000),
        new(8, 10000000)
    ];
}

LogarithmicPoint.cs

namespace ViewModelsSamples.Axes.Logarithmic;

public class LogarithmicPoint(double x, double y)
{
    public double X { get; set; } = x;
    public double Y { get; set; } = y;
}

XAML

<UserControl
    x:Class="WinUISample.Axes.Logarithmic.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.Axes.Logarithmic"
    xmlns:local="using:WinUISample.Axes.Logarithmic"
    mc:Ignorable="d">

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

    <lvc:CartesianChart>

        <lvc:CartesianChart.Series>
            <lvc:SeriesCollection>
                <local:LogarithmicSeries Values="{Binding Values}"/>
            </lvc:SeriesCollection>
        </lvc:CartesianChart.Series>

        <lvc:CartesianChart.YAxes>
            <lvc:AxesCollection>
                <lvc:XamlLogarithmicAxis
                    LogBase="{Binding LogBase}"
                    SeparatorsPaint="{lvc:SolidColorPaint Color='#64b4b4b4'}"
                    SubseparatorsPaint="{lvc:SolidColorPaint
                        Color='#64b4b4b4',
                        StrokeWidth=0.5}"
                    SubseparatorsCount="9"/>
            </lvc:AxesCollection>
        </lvc:CartesianChart.YAxes>

    </lvc:CartesianChart>
</UserControl>

LogarithmicSeries.cs

using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.WinUI;
using ViewModelsSamples.Axes.Logarithmic;

namespace WinUISample.Axes.Logarithmic;

// WinUI xaml parser does not support generic types
// we instead create a non-generic class that inherits from the generic one.
public class LogarithmicSeries : XamlLineSeries<LogarithmicPoint> { }

Articles you might also find useful:

Cartesian chart control
Axes properties
Column series properties