New to Telerik UI for Blazor? Download free 30-day trial

Apply gradient effect on Chart Series


Product Chart for Blazor


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


  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="" version="1.1" width="0" height="0" style="visibility: hidden">
        <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" />

        <ChartSeries Type="ChartSeriesType.Area"

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

See Also

In this article