Axis Style

sample image

Razor

@page "/Axes/Style"
@using LiveChartsCore.SkiaSharpView.Blazor
@using LiveChartsCore;
@using LiveChartsCore.Defaults;
@using LiveChartsCore.SkiaSharpView;
@using LiveChartsCore.SkiaSharpView.Painting;
@using LiveChartsCore.SkiaSharpView.Painting.Effects;
@using SkiaSharp;

<div style="background-color: #303030; padding: 20px">
    <CartesianChart
        Series="@series"
        XAxes="@xAxes"
        YAxes="@yAxes"
        DrawMarginFrame="@frame"
        ZoomMode="LiveChartsCore.Measure.ZoomAndPanMode.Both"
        TooltipPosition="LiveChartsCore.Measure.TooltipPosition.Hidden">
    </CartesianChart>
</div>

@code {
    private ObservablePoint[] values;
    private ISeries[] series;
    private Axis[] xAxes;
    private Axis[] yAxes;
    private DrawMarginFrame frame;

    public Style()
    {
        values = new ObservablePoint[1001];
        var fx = EasingFunctions.BounceInOut;
        for (var i = 0; i < 1001; i++)
        {
            var x = i / 1000f;
            var y = fx(x);
            values[i] = new ObservablePoint(x - 0.5, y - 0.5);
        }

        var gray = new SKColor(195, 195, 195);
        var gray1 = new SKColor(160, 160, 160);
        var gray2 = new SKColor(90, 90, 90);
        var gray3 = new SKColor(60, 60, 60);

        series = new ISeries[]
        {
            new LineSeries<ObservablePoint>
            {
                Values = values,
                Stroke = new SolidColorPaint(new SKColor(33, 150, 243), 4),
                Fill = null,
                GeometryFill = null,
                GeometryStroke = null
            }
        };

        var dashEffect = new DashEffect(new float[] { 3, 3 });

        xAxes = new Axis[]
        {
            new Axis
            {
                Name = "X Axis",
                NamePaint = new SolidColorPaint(gray1),
                TextSize = 18,
                LabelsPaint = new SolidColorPaint(gray),
                SeparatorsPaint = new SolidColorPaint(gray, 1) { PathEffect = dashEffect },
                SubseparatorsPaint = new SolidColorPaint(gray2, 0.5f),
                SubseparatorsCount = 9,
                ZeroPaint = new SolidColorPaint(gray1, 2),
                TicksPaint = new SolidColorPaint(gray, 1.5f),
                SubticksPaint = new SolidColorPaint(gray, 1)
            }
        };
        yAxes = new Axis[]
        {
            new Axis
            {
                Name = "Y Axis",
                NamePaint = new SolidColorPaint(gray1),
                TextSize = 18,
                LabelsPaint = new SolidColorPaint(gray),
                SeparatorsPaint = new SolidColorPaint(gray, 1) { PathEffect = dashEffect },
                SubseparatorsPaint = new SolidColorPaint(gray2, 0.5f),
                SubseparatorsCount = 9,
                ZeroPaint = new SolidColorPaint(gray1, 2),
                TicksPaint = new SolidColorPaint(gray, 1.5f),
                SubticksPaint = new SolidColorPaint(gray, 1)
            }
        };

        frame = new DrawMarginFrame
        {
            Stroke = new SolidColorPaint(gray, 2)
        };
    }
}

Articles you might also find useful:

Cartesian chart control
Axes properties
Line series properties