Class ChartLinearGradient
Provides options to configure a linear gradient for a chart ChartSeries, technical ChartIndicator, or ChartTrendline within the SfChart component.
Inheritance
ChartLinearGradient
Inherited Members
Namespace: Syncfusion.Blazor.Charts
Assembly: Syncfusion.Blazor.dll
Syntax
public class ChartLinearGradient : LinearGradient, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
Remarks
ChartLinearGradient is a child component that inherits from LinearGradient. Use X1, Y1, X2, and Y2 to set the gradient direction, and define color transitions using ChartGradientColorStops with one or more ChartGradientColorStop elements.
Coordinate values are typically normalized to the range 0..1 relative to the paint box, where (0,0) is the top-left and
(1,1) is the bottom-right. Gradient stop Offset commonly supports normalized 0..1 or percentage 0..100 values.
When nested under ChartSeries, ChartIndicator, or ChartTrendline, the gradient is applied automatically to the owning element.
Examples
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
<ChartSeriesCollection>
<ChartSeries Type="ChartSeriesType.Line"
DataSource="@Data"
XName="Month"
YName="Value"
Name="Sales">
<ChartLinearGradient X1="0" Y1="0" X2="0" Y2="1">
<ChartGradientColorStops>
<ChartGradientColorStop Offset="0" Color="#4F46E5" Opacity="1" />
<ChartGradientColorStop Offset="100" Color="#22D3EE" Opacity="1" />
</ChartGradientColorStops>
</ChartLinearGradient>
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code {
public class Point { public string Month { get; set; } = ""; public double Value { get; set; } }
public List<Point> Data = new()
{
new() { Month = "Jan", Value = 35 },
new() { Month = "Feb", Value = 28 },
new() { Month = "Mar", Value = 34 },
};
}
Constructors
ChartLinearGradient()
Declaration
public ChartLinearGradient()