Unable to set the Log scale in Y-axis in live charts

Question

My requirement is to plot the Y-Axis of live charts to show the log scale, the samples given in LiveCharts Scale for plotting that in X-axis its working perfectly fine but when i change that to Y-Axis its not giving the desired output.

<lvc:CartesianChart Series="{Binding SeriesCollection}">
        <lvc:CartesianChart.Resources>
            <Style TargetType="lvc:Separator">
                <Setter Property="Stroke" Value="LightGray"></Setter>
            </Style>
        </lvc:CartesianChart.Resources>

        <lvc:CartesianChart.AxisY>
            <lvc:LogarithmicAxis LabelFormatter="{Binding Formatter}" 
                                 Base="{Binding Base}" >
                <lvc:LogarithmicAxis.Separator>
                    <lvc:Separator StrokeThickness="1" IsEnabled="True"></lvc:Separator>
                </lvc:LogarithmicAxis.Separator>
            </lvc:LogarithmicAxis>
        </lvc:CartesianChart.AxisY>
    </lvc:CartesianChart>

The code behind file is similar as given below

public SeriesCollection SeriesCollection { get; set; }
    public Func<double, string> Formatter { get; set; }
    public double Base { get; set; }

    public MainWindow()
    {
        InitializeComponent();
        Base = 10;

        //var mapper = Mappers.Xy<ObservablePoint>()
        //    .X(point => Math.Log(point.X, Base)) //a 10 base log scale in the X axis
        //    .Y(point => point.Y);

        var mapper = Mappers.Xy<ObservablePoint>()
           .Y(point => Math.Log(point.Y, Base)) //a 10 base log scale in the X axis
           .X(point => point.X);

        SeriesCollection = new SeriesCollection(mapper)
        {
            //new LineSeries
            //{
            //    Values = new ChartValues<ObservablePoint>
            //    {
            //        new ObservablePoint(1, 5),
            //        new ObservablePoint(10, 6),
            //        new ObservablePoint(100, 4),
            //        new ObservablePoint(1000, 2),
            //        new ObservablePoint(10000, 8),
            //        new ObservablePoint(100000, 2),
            //        new ObservablePoint(1000000, 9),
            //        new ObservablePoint(10000000, 8)
            //    }
            //}

            new LineSeries
            {
                Values = new ChartValues<ObservablePoint>
                {
                    new ObservablePoint(5, 1),
                    new ObservablePoint(6, 10),
                    new ObservablePoint(4, 100),
                    new ObservablePoint(2, 1000),
                    new ObservablePoint(8, 10000)
                }
            }
        };

        Formatter = value => Math.Pow(Base, value).ToString("N");

        DataContext = this;
    }

When i have applied the the log scale in X-Axis i am getting the output similar to the below image When i apply the same on Y-Axis the out is not similar to what is expected

Answer 1

I found the solution for the problem, one of the issue i have done is Axis Formatting. Please see the below updated code .

<lvc:CartesianChart Series="{Binding SeriesCollection}">
        <lvc:CartesianChart.Resources>
            <Style TargetType="lvc:Separator">
                <Setter Property="Stroke" Value="LightGray"></Setter>
            </Style>
        </lvc:CartesianChart.Resources>

        <lvc:CartesianChart.AxisY>
            <lvc:LogarithmicAxis LabelFormatter="{Binding FormatterY}" 
                                 Base="{Binding Base}" >
                <lvc:LogarithmicAxis.Separator>
                    <lvc:Separator Step="1" StrokeThickness="1" IsEnabled="False"></lvc:Separator>
                </lvc:LogarithmicAxis.Separator>
            </lvc:LogarithmicAxis>
        </lvc:CartesianChart.AxisY>
        <lvc:CartesianChart.AxisX>
            <lvc:Axis LabelFormatter="{Binding FormatterX}" >
                <lvc:Axis.Separator>
                    <lvc:Separator StrokeThickness="1" Step="1"  IsEnabled="False"></lvc:Separator>
                </lvc:Axis.Separator>
            </lvc:Axis>
        </lvc:CartesianChart.AxisX>
    </lvc:CartesianChart>

and the code behind file will be similar as given below.

    public partial class MainWindow : Window
{
    public SeriesCollection SeriesCollection { get; set; }
    public Func<double, string> FormatterX { get; set; }
    public Func<double, string> FormatterY { get; set; }

    public double Base { get; set; }

    public MainWindow()
    {
        InitializeComponent();

        var mapper = Mappers.Xy<ObservablePoint>()
           .X(point => point.X)
           .Y(point => Math.Log(point.Y, Base)); //a 10 base log scale in the Y axis

        Base = 10;

        SeriesCollection = new SeriesCollection(mapper)
        {
            new LineSeries
            {
                Values = new ChartValues<ObservablePoint>
                {
                    new ObservablePoint(1, 66),
                    new ObservablePoint(2, 45),
                    new ObservablePoint(7, 7),
                    new ObservablePoint(8, 250),
                    new ObservablePoint(10, 13334),
                    new ObservablePoint(11, 80),
                    new ObservablePoint(12, 97),
                    new ObservablePoint(13, 587)
                }
            }

        };

        FormatterY = value => Math.Pow(Base, value).ToString("N0");
        FormatterX = value => value.ToString("N0");
        DataContext = this;
    }

}

and the output will be in the below format