Apply gradient effect on Chart Series

Environment

Product

Chart for Blazor

Description

How can I apply a gradient color effect on the Telerik UI for Blazor Chart series?

Solution

1. Declare an external linear gradient with an svg tag.
2. Set the Color parameter of the ChartSeries and refer the external gradient via its id.

How to apply gradient effect on Area Chart.

<svg xmlns="https://www.w3.org/2000/svg" version="1.1" width="0" height="0" style="visibility: hidden">
    <defs>
        <linearGradient id="svg-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:#3bafda; stop-opacity:0.95" />
            <stop offset="100%" style="stop-color:#3bafda; stop-opacity:0.05" />
        </linearGradient>
    </defs>
</svg>

<TelerikChart>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Area"
                        Color="url(#svg-gradient)"
                        Data="@ChartData">
        </ChartSeries>
    </ChartSeriesItems>
</TelerikChart>

@code {
    private List<object> ChartData = new List<object>() { 10, 2, 7, 5, 15 };
}

See Also

• Chart - Overview