Linear Gradients

Razor

@page "/Design/LinearGradients"
@using LiveChartsCore.SkiaSharpView.Blazor
@using LiveChartsCore;
@using LiveChartsCore.SkiaSharpView;
@using LiveChartsCore.SkiaSharpView.Painting;
@using SkiaSharp;

<CartesianChart
    Series="@series"
    LegendPosition="LiveChartsCore.Measure.LegendPosition.Right">
</CartesianChart>

@code {
    private static int[] values1 = new int[] { 3, 7, 2, 9, 4 };
    private static int[] values2 = new int[] { 4, 2, 8, 5, 3 };

    private static LinearGradientPaint columnGradient = new LinearGradientPaint(
        new[] { new SKColor(0xFF, 0x8C, 0x94), new SKColor(0xDC, 0xED, 0xC2) },
        new SKPoint(0.5f, 0f),
        new SKPoint(0.5f, 1f)
    );

    private static LinearGradientPaint lineGradient = new LinearGradientPaint(
        new[] { new SKColor(0x2D, 0x40, 0x59), new SKColor(0xFF, 0xD3, 0x60) },
        new SKPoint(0f, 0f),
        new SKPoint(1f, 1f)
    )
    {
        StrokeThickness = 10
    };

    private ISeries[] series = new ISeries[]
    {
        new ColumnSeries<int>
        {
            Name = "John",
            Values = values1,
            Fill = columnGradient
        },
        new LineSeries<int>
        {
            Name = "Charles",
            Values = values2,
            GeometrySize = 22,
            Fill = null,
            Stroke = lineGradient,
            GeometryStroke = lineGradient
        }
    };
}