Skip to content

Commit cb696ce

Browse files
Keerthivasan-RamamoorthyKeerthivasan-Ramamoorthy
authored
Merge branch 'development' into 998039-legend-tem
2 parents 3da17e6 + e8b2332 commit cb696ce

16 files changed

+938
-0
lines changed

‎blazor-toc.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -765,6 +765,9 @@
765765
<li>
766766
<a href="/blazor/accumulation-chart/title-and-sub-title">Title and Subtitle</a>
767767
</li>
768+
<li>
769+
<a href="/blazor/accumulation-chart/gradient">Gradient</a>
770+
</li>
768771
<li>
769772
<a href="/blazor/accumulation-chart/chart-print">Print and Export</a>
770773
</li>
@@ -1498,6 +1501,9 @@
14981501
<li>
14991502
<a href="/blazor/chart/trend-lines">Trendlines</a>
15001503
</li>
1504+
<li>
1505+
<a href="/blazor/chart/gradient">Gradient</a>
1506+
</li>
15011507
<li>
15021508
<a href="/blazor/chart/internationalization">Internationalization</a>
15031509
</li>
@@ -4585,6 +4591,7 @@
45854591
<li> <a href="/blazor/stock-chart/panning">Panning</a></li>
45864592
<li> <a href="/blazor/stock-chart/range-selector">Range Selector</a></li>
45874593
<li> <a href="/blazor/stock-chart/appearance">Appearance</a></li>
4594+
<li> <a href="/blazor/stock-chart/gradient">Gradient</a></li>
45884595
<li> <a href="/blazor/stock-chart/export-print">Print and Export</a></li>
45894596
<li> <a href="/blazor/stock-chart/accessibility">Accessibility</a></li>
45904597
<li> <a href="/blazor/stock-chart/events">Events</a></li>

‎blazor/accumulation-chart/gradient.md‎

Lines changed: 324 additions & 0 deletions
Large diffs are not rendered by default.

‎blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-points.png‎

72.3 KB
Loading

‎blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-series.png‎

53.7 KB
Loading

‎blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-points.png‎

56.7 KB
Loading

‎blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-series.png‎

60.9 KB
Loading

‎blazor/chart/gradient.md‎

Lines changed: 317 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,317 @@
1+
---
2+
layout: post
3+
title: Gradient in Blazor Charts Component | Syncfusion
4+
description: Checkout and learn about applying linear and radial gradients to series, trendlines and indicators in the Syncfusion Blazor Charts component.
5+
platform: Blazor
6+
control: Chart
7+
documentation: ug
8+
---
9+
10+
# Gradient in Blazor Charts Component
11+
12+
Gradients add depth and modern styling to charts by smoothly blending multiple colors. The Charts component supports two gradient types:
13+
14+
- Linear gradient
15+
- Radial gradient
16+
17+
Gradients can be applied to:
18+
19+
- Series
20+
- Trendlines
21+
- Technical Indicators
22+
23+
## Linear gradient
24+
25+
A linear gradient blends colors along a straight path from a defined start point to an end point. Configure it by adding `ChartLinearGradient` inside the target element (Series, Trendline, or Indicator) and define one or more color stops that control how colors transition across the gradient. Set the start and end positions of the gradient using `X1`, `Y1`, `X2`, and `Y2` properties. The color stop values such as `Offset`, `Color`, `Opacity`, `Lighten`, and `Brighten` are set using the `ChartGradientColorStop` property.
26+
27+
In the `ChartLinearGradient`:
28+
```cshtml
29+
X1 - Sets the horizontal start position of the gradient (0 to 1).
30+
Y1 - Sets the vertical start position of the gradient (0 to 1).
31+
X2 - Sets the horizontal end position of the gradient (0 to 1).
32+
Y2 - Sets the vertical end position of the gradient (0 to 1).
33+
```
34+
35+
In the `ChartGradientColorStop`:
36+
- Offset - Specifies the position of the color stop along the gradient (0 to 100).
37+
- Color - Sets the color at the stop.
38+
- Opacity - Defines the transparency of the stop (0 to 1).
39+
- Lighten - Adjusts lightness at the stop. Positive values lighten the color; negative values darken it.
40+
- Brighten - Adjusts brightness at the stop. Positive values increase brightness; negative values decrease it.
41+
42+
### Series
43+
44+
Apply a linear gradient to a series by adding `ChartLinearGradient` inside the target Series. The same gradient is applied to the series markers, legend symbol and tooltip marker for visual consistency.
45+
46+
```cshtml
47+
48+
@using Syncfusion.Blazor.Charts
49+
50+
@* Initialize the Chart to display monthly sales revenue by month using Column series *@
51+
<SfChart Title="Monthly Sales Performance">
52+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
53+
<ChartPrimaryYAxis LabelFormat="${value}k" />
54+
55+
<ChartSeriesCollection>
56+
<ChartSeries Name="Sales" Type="ChartSeriesType.Column" DataSource="@SalesData" XName="Month" YName="Amount">
57+
@* Series Linear Gradient: defines color stops for the entire series *@
58+
<ChartLinearGradient X1="0" Y1="0" X2="0" Y2="1">
59+
<ChartGradientColorStops>
60+
<ChartGradientColorStop Offset="0" Color="#4F46E5" Opacity="1" Lighten="0" Brighten="1" />
61+
<ChartGradientColorStop Offset="100" Color="#22D3EE" Opacity="0.95" Lighten="-0.05" Brighten="0.9" />
62+
</ChartGradientColorStops>
63+
</ChartLinearGradient>
64+
65+
<ChartMarker Visible="true" IsFilled="true">
66+
<ChartDataLabel Visible="true"></ChartDataLabel>
67+
</ChartMarker>
68+
</ChartSeries>
69+
</ChartSeriesCollection>
70+
71+
<ChartTooltipSettings Enable="true"></ChartTooltipSettings>
72+
<ChartLegendSettings Visible="true"></ChartLegendSettings>
73+
</SfChart>
74+
75+
@code {
76+
public class SalesPoint
77+
{
78+
public string Month { get; set; }
79+
public double Amount { get; set; }
80+
}
81+
82+
public List<SalesPoint> SalesData = new ()
83+
{
84+
new SalesPoint { Month = "Jan", Amount = 78 },
85+
new SalesPoint { Month = "Feb", Amount = 88 },
86+
new SalesPoint { Month = "Mar", Amount = 99 },
87+
new SalesPoint { Month = "Apr", Amount = 92 },
88+
new SalesPoint { Month = "May", Amount = 95 },
89+
new SalesPoint { Month = "Jun", Amount = 102 },
90+
new SalesPoint { Month = "Jul", Amount = 110 },
91+
new SalesPoint { Month = "Aug", Amount = 105 }
92+
};
93+
}
94+
95+
```
96+
![Blazor Column Chart with Linear Gradient](images/gradient/blazor-column-chart-linear-gradient.png)
97+
98+
### Trendlines
99+
100+
Apply a linear gradient to a trendline by adding `ChartLinearGradient` inside the target Trendline.
101+
102+
```cshtml
103+
104+
@using Syncfusion.Blazor.Charts
105+
106+
@* Initialize the Chart to display orders processed by month using Spline series *@
107+
<SfChart Title="Retail Orders Processed">
108+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
109+
<ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
110+
</ChartPrimaryXAxis>
111+
<ChartPrimaryYAxis Title="Orders">
112+
<ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
113+
<ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
114+
</ChartPrimaryYAxis>
115+
116+
<ChartSeriesCollection>
117+
<ChartSeries DataSource="@OrdersData" XName="Month" YName="Orders" Type="ChartSeriesType.Spline">
118+
<ChartMarker Visible="true"></ChartMarker>
119+
<ChartTrendlines>
120+
<ChartTrendline Type="TrendlineTypes.Linear" Width="3" Name="Trend">
121+
@* Trendline Linear Gradient: applied to trendline stroke *@
122+
<ChartLinearGradient X1="0" Y1="0" X2="1" Y2="0">
123+
<ChartGradientColorStops>
124+
<ChartGradientColorStop Offset="0" Color="#F97316" Opacity="1" />
125+
<ChartGradientColorStop Offset="100" Color="#4F46E5" Opacity="1" />
126+
</ChartGradientColorStops>
127+
</ChartLinearGradient>
128+
</ChartTrendline>
129+
</ChartTrendlines>
130+
</ChartSeries>
131+
</ChartSeriesCollection>
132+
133+
<ChartLegendSettings Visible="true"></ChartLegendSettings>
134+
</SfChart>
135+
136+
@code {
137+
public class OrdersPoint
138+
{
139+
public string Month { get; set; }
140+
public double Orders { get; set; }
141+
}
142+
143+
public List<OrdersPoint> OrdersData = new ()
144+
{
145+
new OrdersPoint { Month = "Jan", Orders = 24 },
146+
new OrdersPoint { Month = "Feb", Orders = 30 },
147+
new OrdersPoint { Month = "Mar", Orders = 27 },
148+
new OrdersPoint { Month = "Apr", Orders = 34 },
149+
new OrdersPoint { Month = "May", Orders = 41 },
150+
new OrdersPoint { Month = "Jun", Orders = 37 },
151+
new OrdersPoint { Month = "Jul", Orders = 49 },
152+
new OrdersPoint { Month = "Aug", Orders = 45 },
153+
new OrdersPoint { Month = "Sep", Orders = 39 },
154+
new OrdersPoint { Month = "Oct", Orders = 46 },
155+
new OrdersPoint { Month = "Nov", Orders = 54 },
156+
new OrdersPoint { Month = "Dec", Orders = 52 }
157+
};
158+
}
159+
160+
```
161+
![Trendlines in Blazor Spline Chart with Linear Gradient](images/gradient/blazor-spline-chart-linear-trendlines-linear-gradient.png)
162+
163+
### Technical Indicators
164+
165+
Apply a linear gradient to a technical indicator by adding `ChartLinearGradient` inside the target Indicator.
166+
167+
```cshtml
168+
169+
@using Syncfusion.Blazor.Charts
170+
171+
@* Initialize the Chart to display equity price by month using Candle series and EMA indicator *@
172+
<SfChart Title="Equity Price - Jan-Nov 2025">
173+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="MMM yyyy" IntervalType="IntervalType.Months" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
174+
<ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
175+
</ChartPrimaryXAxis>
176+
<ChartPrimaryYAxis Title="Price (USD)" LabelFormat="${value}" Minimum="90" Maximum="130" Interval="10">
177+
<ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
178+
<ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
179+
</ChartPrimaryYAxis>
180+
181+
<ChartSeriesCollection>
182+
<ChartSeries DataSource="@PriceSeries" Name="Equity Price" XName="Date" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open" Type="ChartSeriesType.Candle">
183+
</ChartSeries>
184+
</ChartSeriesCollection>
185+
186+
<ChartIndicators>
187+
<ChartIndicator Type="TechnicalIndicators.Ema" Field="FinancialDataFields.Close" SeriesName="Equity Price" XName="Date" Period="3" Width="2">
188+
@* Indicator Linear Gradient: applied to the EMA indicator line *@
189+
<ChartLinearGradient X1="0" Y1="0" X2="1" Y2="0">
190+
<ChartGradientColorStops>
191+
<ChartGradientColorStop Offset="0" Color="#7C3AED" Opacity="1" />
192+
<ChartGradientColorStop Offset="100" Color="#F59E0B" Opacity="1" />
193+
</ChartGradientColorStops>
194+
</ChartLinearGradient>
195+
</ChartIndicator>
196+
</ChartIndicators>
197+
198+
<ChartTooltipSettings Enable="true"></ChartTooltipSettings>
199+
<ChartLegendSettings Visible="false"></ChartLegendSettings>
200+
</SfChart>
201+
202+
@code {
203+
public class EMAChartData
204+
{
205+
public DateTime Date { get; set; }
206+
public double Open { get; set; }
207+
public double High { get; set; }
208+
public double Low { get; set; }
209+
public double Close { get; set; }
210+
public double Volume { get; set; }
211+
}
212+
213+
public List<EMAChartData> PriceSeries = new ()
214+
{
215+
new EMAChartData { Date = new DateTime(2025, 01, 01), Open = 103.9, High = 106.8, Low = 102.5, Close = 105.6, Volume = 182540000 },
216+
new EMAChartData { Date = new DateTime(2025, 02, 01), Open = 105.2, High = 108.1, Low = 103.4, Close = 106.9, Volume = 176310000 },
217+
new EMAChartData { Date = new DateTime(2025, 03, 01), Open = 106.7, High = 110.6, Low = 105.1, Close = 108.7, Volume = 189250000 },
218+
new EMAChartData { Date = new DateTime(2025, 04, 01), Open = 108.9, High = 110.9, Low = 106.8, Close = 107.6, Volume = 171900000 },
219+
new EMAChartData { Date = new DateTime(2025, 05, 01), Open = 107.8, High = 112.3, Low = 106.9, Close = 111.4, Volume = 196700000 },
220+
new EMAChartData { Date = new DateTime(2025, 06, 01), Open = 111.2, High = 114.9, Low = 110.0, Close = 113.6, Volume = 205600000 },
221+
new EMAChartData { Date = new DateTime(2025, 07, 01), Open = 113.5, High = 117.3, Low = 112.2, Close = 116.0, Volume = 213400000 },
222+
new EMAChartData { Date = new DateTime(2025, 08, 01), Open = 116.1, High = 119.2, Low = 114.6, Close = 118.1, Volume = 221900000 },
223+
new EMAChartData { Date = new DateTime(2025, 09, 01), Open = 117.9, High = 120.7, Low = 116.0, Close = 116.8, Volume = 198300000 },
224+
new EMAChartData { Date = new DateTime(2025, 10, 01), Open = 116.7, High = 121.6, Low = 116.1, Close = 119.9, Volume = 234600000 },
225+
new EMAChartData { Date = new DateTime(2025, 11, 01), Open = 120.2, High = 123.9, Low = 118.8, Close = 122.5, Volume = 226100000 }
226+
};
227+
}
228+
229+
```
230+
![Exponential Moving Average in Blazor Candle Chart with Linear Gradient](images/gradient/blazor-candle-chart-exponential-moving-average-linear-gradient.png)
231+
232+
## Radial gradient
233+
234+
A radial gradient blends colors outward from a central point, creating a circular or elliptical color progression. Configure it by adding `ChartRadialGradient` inside the target element (Series, Trendline, or Indicator) and define one or more color stops to control how colors transition from the center to the outer edge. Set the gradient’s center, optional focal point, and radius using `ChartRadialGradient` properties. The color stop values such as `Offset`, `Color`, `Opacity`, `Lighten`, and `Brighten` are set using the `ChartGradientColorStop` property.
235+
236+
In the `ChartRadialGradient`:
237+
```cshtml
238+
Cx - Sets the normalized horizontal center of the gradient (0 to 1).
239+
Cy - Sets the normalized vertical center of the gradient (0 to 1).
240+
Fx - Sets the normalized horizontal focal point from which the gradient appears to originate (0 to 1).
241+
Fy - Sets the normalized vertical focal point (0 to 1).
242+
R - Sets the normalized radius of the gradient circle (0 to 1).
243+
```
244+
245+
In the `ChartGradientColorStop`:
246+
- Offset - Specifies the position of the color stop along the gradient (0 to 100).
247+
- Color - Sets the color at the stop.
248+
- Opacity - Defines the transparency of the stop (0 to 1).
249+
- Lighten - Adjusts lightness at the stop. Positive values lighten the color; negative values darken it.
250+
- Brighten - Adjusts brightness at the stop. Positive values increase brightness; negative values decrease it.
251+
252+
### Series
253+
254+
Apply a radial gradient to a series by adding `ChartRadialGradient` inside the target Series. The same gradient is applied to the series markers, legend symbol and tooltip marker for visual consistency.
255+
256+
```cshtml
257+
258+
@using Syncfusion.Blazor.Charts
259+
260+
@* Initialize the Chart to display monthly sales revenue by month using Column series *@
261+
<SfChart Title="Monthly Sales Performance">
262+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
263+
<ChartPrimaryYAxis LabelFormat="${value}k" />
264+
265+
<ChartSeriesCollection>
266+
<ChartSeries Name="Sales" Type="ChartSeriesType.Column" DataSource="@SalesData" XName="Month" YName="Amount">
267+
@* Series Radial Gradient: defines color stops for the entire series *@
268+
<ChartRadialGradient Cx="0.5" Cy="0.5" Fx="0.5" Fy="0.5" R="0.5">
269+
<ChartGradientColorStops>
270+
<ChartGradientColorStop Offset="0" Color="#FFFF00" Opacity="1" Lighten="0" Brighten="1" />
271+
<ChartGradientColorStop Offset="100" Color="#7C3AED" Opacity="0.95" Lighten="-0.05" Brighten="0.9" />
272+
</ChartGradientColorStops>
273+
</ChartRadialGradient>
274+
275+
<ChartMarker Visible="true" IsFilled="true">
276+
<ChartDataLabel Visible="true"></ChartDataLabel>
277+
</ChartMarker>
278+
</ChartSeries>
279+
</ChartSeriesCollection>
280+
281+
<ChartTooltipSettings Enable="true"></ChartTooltipSettings>
282+
<ChartLegendSettings Visible="true"></ChartLegendSettings>
283+
</SfChart>
284+
285+
@code {
286+
public class SalesPoint
287+
{
288+
public string Month { get; set; }
289+
public double Amount { get; set; }
290+
}
291+
292+
public List<SalesPoint> SalesData = new ()
293+
{
294+
new SalesPoint { Month = "Jan", Amount = 78 },
295+
new SalesPoint { Month = "Feb", Amount = 88 },
296+
new SalesPoint { Month = "Mar", Amount = 99 },
297+
new SalesPoint { Month = "Apr", Amount = 92 },
298+
new SalesPoint { Month = "May", Amount = 95 },
299+
new SalesPoint { Month = "Jun", Amount = 102 },
300+
new SalesPoint { Month = "Jul", Amount = 110 },
301+
new SalesPoint { Month = "Aug", Amount = 105 }
302+
};
303+
}
304+
305+
```
306+
![Blazor Column Chart with Radial Gradient](images/gradient/blazor-column-chart-radial-gradient.png)
307+
308+
N> Radial gradients can also be applied to Trendlines and Technical Indicators in the same way by placing a `ChartRadialGradient` with color stops inside the target `ChartTrendline` or `ChartIndicator`.
309+
310+
## See also
311+
312+
* [Appearance](./chart-appearance.md)
313+
* [Markers](./data-markers.md)
314+
* [Legend](./legend.md)
315+
* [Tooltip](./tool-tip)
316+
* [Technical Indicators](./technical-indicators.md)
317+
* [Trendlines](./trend-lines.md)

‎blazor/chart/images/gradient/blazor-candle-chart-exponential-moving-average-linear-gradient.png‎

33.5 KB
Loading

‎blazor/chart/images/gradient/blazor-column-chart-linear-gradient.png‎

66.8 KB
Loading

‎blazor/chart/images/gradient/blazor-column-chart-radial-gradient.png‎

89.3 KB
Loading

0 commit comments

Comments
 (0)