Logarithmic Scale

sample image

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;
}

Razor

@page "/Axes/Logarithmic"
@using LiveChartsCore.SkiaSharpView.Blazor
@using LiveChartsCore;
@using LiveChartsCore.SkiaSharpView;
@using LiveChartsCore.SkiaSharpView.Painting;
@using ViewModelsSamples.Axes.Logarithmic;

<CartesianChart
    Series="@series"
    YAxes="@yAxes">
</CartesianChart>

@code {
    static Logarithmic()
    {
        var logBase = 10d;
        // Register the logarithmic point mapper
        LiveCharts.Configure(config =>
            config.HasMap<LogarithmicPoint>(
                (logPoint, index) => new(logPoint.X, Math.Log(logPoint.Y, logBase))));
    }

    private double logBase = 10d;
    private LogarithmicPoint[] values = new LogarithmicPoint[]
    {
        new(1, 1),
        new(2, 10),
        new(3, 100),
        new(4, 1000),
        new(5, 10000),
        new(6, 100000),
        new(7, 1000000),
        new(8, 10000000)
    };

    private ISeries[] series => new ISeries[]
    {
        new LineSeries<LogarithmicPoint> { Values = values }
    };

    private Axis[] yAxes => new Axis[]
    {
        new LogarithmicAxis(logBase)
        {
            SeparatorsPaint = new SolidColorPaint(SkiaSharp.SKColors.LightSlateGray),
            SubseparatorsPaint = new SolidColorPaint(SkiaSharp.SKColors.LightSlateGray) { StrokeThickness = 0.5f },
            SubseparatorsCount = 9
        }
    };
}

Articles you might also find useful:

Cartesian chart control
Axes properties
Column series properties