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 ContentPage instance, but LiveCharts controls can be used inside any container.
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
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="MauiSample.Axes.Logarithmic.View"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Maui;assembly=LiveChartsCore.SkiaSharpView.Maui"
xmlns:vms="clr-namespace:ViewModelsSamples.Axes.Logarithmic;assembly=ViewModelsSamples"
x:DataType="vms:ViewModel">
<ContentPage.BindingContext>
<vms:ViewModel/>
</ContentPage.BindingContext>
<lvc:CartesianChart>
<lvc:CartesianChart.Series>
<lvc:SeriesCollection>
<lvc:XamlLineSeries
x:TypeArguments="vms:LogarithmicPoint"
Values="{Binding Values}"/>
</lvc:SeriesCollection>
</lvc:CartesianChart.Series>
<lvc:CartesianChart.YAxes>
<lvc:AxesCollection>
<lvc:XamlLogarithmicAxis
LogBase="{Binding LogBase}"
SeparatorsPaint="#64b4b4b4"
SubseparatorsPaint="{lvc:SolidColorPaint
Color='#64b4b4b4',
StrokeWidth=0.5}"
SubseparatorsCount="9"/>
</lvc:AxesCollection>
</lvc:CartesianChart.YAxes>
</lvc:CartesianChart>
</ContentPage>
