Skip to content

Commit 252d851

Browse files
mohammednowfel4989mohammednowfel4989
committed
996529: Provided UG documentation for the gradient feature in chart, accumulation chart and stock chart.
1 parent 9096b28 commit 252d851

16 files changed

+903
-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>
@@ -1476,6 +1479,9 @@
14761479
<li>
14771480
<a href="/blazor/chart/trend-lines">Trendlines</a>
14781481
</li>
1482+
<li>
1483+
<a href="/blazor/chart/gradient">Gradient</a>
1484+
</li>
14791485
<li>
14801486
<a href="/blazor/chart/internationalization">Internationalization</a>
14811487
</li>
@@ -4561,6 +4567,7 @@
45614567
<li> <a href="/blazor/stock-chart/panning">Panning</a></li>
45624568
<li> <a href="/blazor/stock-chart/range-selector">Range Selector</a></li>
45634569
<li> <a href="/blazor/stock-chart/appearance">Appearance</a></li>
4570+
<li> <a href="/blazor/stock-chart/gradient">Gradient</a></li>
45644571
<li> <a href="/blazor/stock-chart/export-print">Print and Export</a></li>
45654572
<li> <a href="/blazor/stock-chart/accessibility">Accessibility</a></li>
45664573
<li> <a href="/blazor/stock-chart/events">Events</a></li>

‎blazor/accumulation-chart/gradient.md‎

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