Multiple Axes

Razor

@page "/Axes/Multiple"
@using LiveChartsCore.SkiaSharpView.Blazor
@using LiveChartsCore;
@using LiveChartsCore.SkiaSharpView;
@using LiveChartsCore.SkiaSharpView.Painting;
@using SkiaSharp;

<CartesianChart
    Series="@series"
    YAxes="@yAxes"
    LegendPosition="LiveChartsCore.Measure.LegendPosition.Left"
    LegendBackgroundPaint="@legendBackgroundPaint"
    LegendTextPaint="@legendTextPaint"
    LegendTextSize="16">
</CartesianChart>

@code {
    private static double[] values1 = new double[] { 14, 13, 14, 15, 17 };
    private static double[] values2 = new double[] { 11, 12, 13, 10, 13 };
    private static double[] values3 = new double[] { 533, 586, 425, 579, 518 };
    private static double[] values4 = new double[] { 5493, 7843, 4368, 9018, 3902 };

    private static SKColor blue = new SKColor(25, 118, 210);
    private static SKColor red = new SKColor(229, 57, 53);
    private static SKColor yellow = new SKColor(198, 167, 0);
    private static SKColor legendBg = new SKColor(238, 238, 238);
    private static SKColor legendText = new SKColor(50, 50, 50);

    private ISeries[] series = new ISeries[]
    {
        new LineSeries<double>
        {
            Name = "Tens",
            Values = values1,
            Stroke = new SolidColorPaint(blue, 2),
            GeometryStroke = new SolidColorPaint(blue, 2),
            Fill = null,
            ScalesYAt = 0
        },
        new LineSeries<double>
        {
            Name = "Tens 2",
            Values = values2,
            Stroke = new SolidColorPaint(blue, 2),
            GeometryStroke = new SolidColorPaint(blue, 2),
            Fill = null,
            ScalesYAt = 0
        },
        new LineSeries<double>
        {
            Name = "Hundreds",
            Values = values3,
            Stroke = new SolidColorPaint(red, 2),
            GeometryStroke = new SolidColorPaint(red, 2),
            Fill = null,
            ScalesYAt = 1
        },
        new LineSeries<double>
        {
            Name = "Thousands",
            Values = values4,
            Stroke = new SolidColorPaint(yellow, 2),
            GeometryStroke = new SolidColorPaint(yellow, 2),
            Fill = null,
            ScalesYAt = 2
        }
    };

    private Axis[] yAxes = new Axis[]
    {
        new Axis {
            Name = "Tens",
            Padding = new LiveChartsCore.Drawing.Padding(0, 0, 20, 0),
            NamePaint = new SolidColorPaint(blue),
            LabelsPaint = new SolidColorPaint(blue),
            TicksPaint = new SolidColorPaint(blue),
            SubticksPaint = new SolidColorPaint(blue)
        },
        new Axis {
            Name = "Hundreds",
            Padding = new LiveChartsCore.Drawing.Padding(20, 0, 0, 0),
            Position = LiveChartsCore.Measure.AxisPosition.End,
            ShowSeparatorLines = false,
            NamePaint = new SolidColorPaint(red),
            LabelsPaint = new SolidColorPaint(red),
            TicksPaint = new SolidColorPaint(red),
            SubticksPaint = new SolidColorPaint(red)
        },
        new Axis {
            Name = "Thousands",
            Padding = new LiveChartsCore.Drawing.Padding(20, 0, 0, 0),
            Position = LiveChartsCore.Measure.AxisPosition.End,
            ShowSeparatorLines = false,
            NamePaint = new SolidColorPaint(yellow),
            LabelsPaint = new SolidColorPaint(yellow),
            TicksPaint = new SolidColorPaint(yellow),
            SubticksPaint = new SolidColorPaint(yellow)
        }
    };

    private SolidColorPaint legendBackgroundPaint = new SolidColorPaint(legendBg);
    private SolidColorPaint legendTextPaint = new SolidColorPaint(legendText);
}

Articles you might also find useful: