Sections

Razor

@page "/General/Sections"
@using LiveChartsCore.SkiaSharpView.Blazor
@using LiveChartsCore;
@using LiveChartsCore.Defaults;
@using LiveChartsCore.SkiaSharpView;
@using LiveChartsCore.SkiaSharpView.Painting;
@using SkiaSharp;

<CartesianChart
    Series="@series"
    Sections="@sections">
</CartesianChart>

@code {
    private static ObservablePoint[] values = new ObservablePoint[]
    {
        new ObservablePoint(2.2, 5.4),
        new ObservablePoint(4.5, 2.5),
        new ObservablePoint(4.2, 7.4),
        new ObservablePoint(6.4, 9.9),
        new ObservablePoint(8.9, 3.9),
        new ObservablePoint(9.9, 5.2)
    };

    private ISeries[] series = new ISeries[]
    {
        new ScatterSeries<ObservablePoint>
        {
            Values = values
        }
    };

    private RectangularSection[] sections = new RectangularSection[]
    {
        new RectangularSection {
            Xi = 3,
            Xj = 4,
            Fill = new SolidColorPaint(SKColor.Parse("#FFCDD2"))
        },
        new RectangularSection {
            Xi = 5,
            Xj = 6,
            Yi = 2,
            Yj = 8,
            Fill = new SolidColorPaint(SKColor.Parse("#BBDEFB"))
        },
        new RectangularSection {
            Xi = 8,
            Label = "A section here!",
            LabelSize = 14,
            LabelPaint = new SolidColorPaint(SKColor.Parse("#FF6F00")),
            Fill = new SolidColorPaint(SKColor.Parse("#F9FBE7"))
        }
    };
}

You can also create lines as sections, in the next example we set the same value for both Yi and Yj and for the Xi and Xj we use the default value (null or double.NaN):

@page "/General/Sections2"
@using LiveChartsCore.SkiaSharpView.Blazor
@using LiveChartsCore;
@using LiveChartsCore.Defaults;
@using LiveChartsCore.SkiaSharpView;
@using LiveChartsCore.SkiaSharpView.Painting;
@using SkiaSharp;

<CartesianChart
    Series="@series"
    Sections="@sections">
</CartesianChart>

@code {
    private static ObservablePoint[] values = new ObservablePoint[]
    {
        new ObservablePoint(2.2, 5.4), new ObservablePoint(4.5, 2.5), new ObservablePoint(4.2, 7.4),
        new ObservablePoint(6.4, 9.9), new ObservablePoint(4.2, 9.2), new ObservablePoint(5.8, 3.5),
        new ObservablePoint(7.3, 5.8), new ObservablePoint(8.9, 3.9), new ObservablePoint(6.1, 4.6),
        new ObservablePoint(9.4, 7.7), new ObservablePoint(8.4, 8.5), new ObservablePoint(3.6, 9.6),
        new ObservablePoint(4.4, 6.3), new ObservablePoint(5.8, 4.8), new ObservablePoint(6.9, 3.4),
        new ObservablePoint(7.6, 1.8), new ObservablePoint(8.3, 8.3), new ObservablePoint(9.9, 5.2),
        new ObservablePoint(8.1, 4.7), new ObservablePoint(7.4, 3.9), new ObservablePoint(6.8, 2.3)
    };

    private ISeries[] series = new ISeries[]
    {
        new ScatterSeries<ObservablePoint>
        {
            Values = values,
            GeometrySize = 10,
            Stroke = new SolidColorPaint(SKColor.Parse("#00f")),
            Fill = null
        }
    };

    private RectangularSection[] sections = new RectangularSection[]
    {
        new RectangularSection {
            Yi = 8,
            Yj = 8,
            Stroke = new SolidColorPaint
            {
                Color = SKColor.Parse("#F00"),
                StrokeThickness = 3,
                PathEffect = new LiveChartsCore.SkiaSharpView.Painting.Effects.DashEffect(new float[] { 6, 6 })
            }
        },
        new RectangularSection {
            Xi = 6,
            Xj = 8,
            Fill = new SolidColorPaint(SKColor.Parse("#300000FF"))
        }
    };
}

Articles you might also find useful: