Skip to content

Commit 0ece670

Browse files
mohammednowfel4989mohammednowfel4989
committed
996529: Added comments for the tags in the samples of the gradient UG.
1 parent 252d851 commit 0ece670

File tree

3 files changed

+24
-0
lines changed

3 files changed

+24
-0
lines changed

‎blazor/accumulation-chart/gradient.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ A linear gradient may be applied directly at the series level. The same gradient
3939
4040
@using Syncfusion.Blazor.Charts
4141
42+
@* Initialize the AccumulationChart to display orders by category using a Pie series *@
4243
<SfAccumulationChart Title="Orders by Category" Width="100%">
4344
<AccumulationChartLegendSettings Visible="true" />
4445
<AccumulationChartTooltipSettings Enable="true" />
@@ -52,6 +53,7 @@ A linear gradient may be applied directly at the series level. The same gradient
5253
<AccumulationChartDataLabelFont Size="12px" />
5354
</AccumulationDataLabelSettings>
5455
56+
@* Series Linear Gradient: defines color stops for the entire series *@
5557
<AccumulationChartLinearGradient X1="0.1" Y1="0.0" X2="0.9" Y2="1.0">
5658
<AccumulationChartGradientColorStops>
5759
<AccumulationChartGradientColorStop Offset="0" Color="#4F46E5" Opacity="1" Brighten="0.55" />
@@ -95,7 +97,9 @@ A diagonal linear gradient can be applied per data point using the `OnPointRende
9597
9698
@using Syncfusion.Blazor.Charts
9799
100+
@* Initialize the AccumulationChart to display share of e-commerce orders by category using a Pie series *@
98101
<SfAccumulationChart Title="Share of E-commerce Orders by Category" Width="100%">
102+
@* Point Render: applies a diagonal linear gradient per point *@
99103
<AccumulationChartEvents OnPointRender="OnPointRender" />
100104
<AccumulationChartLegendSettings Visible="true" />
101105
<AccumulationChartTooltipSettings Enable="true" />
@@ -183,6 +187,7 @@ A radial gradient can be applied directly at the series level. The same gradient
183187
184188
@using Syncfusion.Blazor.Charts
185189
190+
@* Initialize the AccumulationChart to display orders by category using a Pie series *@
186191
<SfAccumulationChart Title="Orders by Category" Width="100%">
187192
<AccumulationChartLegendSettings Visible="true" />
188193
<AccumulationChartTooltipSettings Enable="true" />
@@ -196,6 +201,7 @@ A radial gradient can be applied directly at the series level. The same gradient
196201
<AccumulationChartDataLabelFont Size="12px" />
197202
</AccumulationDataLabelSettings>
198203
204+
@* Series Radial Gradient: defines color stops for the entire series *@
199205
<AccumulationChartRadialGradient Cx="0.22" Cy="0.22" Fx="0.12" Fy="0.12" R="0.96">
200206
<AccumulationChartGradientColorStops>
201207
<AccumulationChartGradientColorStop Offset="0" Color="#10B981" Opacity="1" Brighten="0.85" />
@@ -241,7 +247,9 @@ The following example uses a distinct color palette and an off-center radial gra
241247
242248
@using Syncfusion.Blazor.Charts
243249
250+
@* Initialize the AccumulationChart to display share of e-commerce orders by category using a Pie series *@
244251
<SfAccumulationChart Title="Share of E-commerce Orders by Category" Width="100%">
252+
@* Point Render: applies an off-center radial gradient per point *@
245253
<AccumulationChartEvents OnPointRender="OnPointRender" />
246254
<AccumulationChartLegendSettings Visible="true" />
247255
<AccumulationChartTooltipSettings Enable="true" />

‎blazor/chart/gradient.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,14 @@ Apply a linear gradient to a series by adding `ChartLinearGradient` inside the t
4545
4646
@using Syncfusion.Blazor.Charts
4747
48+
@* Initialize the Chart to display monthly sales revenue by month using Column series *@
4849
<SfChart Title="Monthly Sales Performance">
4950
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
5051
<ChartPrimaryYAxis LabelFormat="${value}k" />
5152
5253
<ChartSeriesCollection>
5354
<ChartSeries Name="Sales" Type="ChartSeriesType.Column" DataSource="@SalesData" XName="Month" YName="Amount">
55+
@* Series Linear Gradient: defines color stops for the entire series *@
5456
<ChartLinearGradient X1="0" Y1="0" X2="0" Y2="1">
5557
<ChartGradientColorStops>
5658
<ChartGradientColorStop Offset="0" Color="#4F46E5" Opacity="1" Lighten="0" Brighten="1" />
@@ -99,6 +101,7 @@ Apply a linear gradient to a trendline by adding `ChartLinearGradient` inside th
99101
100102
@using Syncfusion.Blazor.Charts
101103
104+
@* Initialize the Chart to display orders processed by month using Spline series *@
102105
<SfChart Title="Retail Orders Processed">
103106
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
104107
<ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
@@ -113,6 +116,7 @@ Apply a linear gradient to a trendline by adding `ChartLinearGradient` inside th
113116
<ChartMarker Visible="true"></ChartMarker>
114117
<ChartTrendlines>
115118
<ChartTrendline Type="TrendlineTypes.Linear" Width="3" Name="Trend">
119+
@* Trendline Linear Gradient: applied to trendline stroke *@
116120
<ChartLinearGradient X1="0" Y1="0" X2="1" Y2="0">
117121
<ChartGradientColorStops>
118122
<ChartGradientColorStop Offset="0" Color="#F97316" Opacity="1" />
@@ -162,6 +166,7 @@ Apply a linear gradient to a technical indicator by adding `ChartLinearGradient`
162166
163167
@using Syncfusion.Blazor.Charts
164168
169+
@* Initialize the Chart to display equity price by month using Candle series and EMA indicator *@
165170
<SfChart Title="Equity Price - Jan-Nov 2025">
166171
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="MMM yyyy" IntervalType="IntervalType.Months" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
167172
<ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
@@ -178,6 +183,7 @@ Apply a linear gradient to a technical indicator by adding `ChartLinearGradient`
178183
179184
<ChartIndicators>
180185
<ChartIndicator Type="TechnicalIndicators.Ema" Field="FinancialDataFields.Close" SeriesName="Equity Price" XName="Date" Period="3" Width="2">
186+
@* Indicator Linear Gradient: applied to the EMA indicator line *@
181187
<ChartLinearGradient X1="0" Y1="0" X2="1" Y2="0">
182188
<ChartGradientColorStops>
183189
<ChartGradientColorStop Offset="0" Color="#7C3AED" Opacity="1" />
@@ -247,12 +253,14 @@ Apply a radial gradient to a series by adding `ChartRadialGradient` inside the t
247253
248254
@using Syncfusion.Blazor.Charts
249255
256+
@* Initialize the Chart to display monthly sales revenue by month using Column series *@
250257
<SfChart Title="Monthly Sales Performance">
251258
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
252259
<ChartPrimaryYAxis LabelFormat="${value}k" />
253260
254261
<ChartSeriesCollection>
255262
<ChartSeries Name="Sales" Type="ChartSeriesType.Column" DataSource="@SalesData" XName="Month" YName="Amount">
263+
@* Series Radial Gradient: defines color stops for the entire series *@
256264
<ChartRadialGradient Cx="0.5" Cy="0.5" Fx="0.5" Fy="0.5" R="0.5">
257265
<ChartGradientColorStops>
258266
<ChartGradientColorStop Offset="0" Color="#FFFF00" Opacity="1" Lighten="0" Brighten="1" />

‎blazor/stock-chart/gradient.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,14 @@ Apply a linear gradient to a series by adding `StockChartLinearGradient` inside
4545
4646
@using Syncfusion.Blazor.Charts
4747
48+
@* Initialize the Stock Chart to display AAPL stock price using a Candle series *@
4849
<SfStockChart Title="AAPL Stock Price">
4950
<StockChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" />
5051
<StockChartPrimaryYAxis Interval="10" />
5152
5253
<StockChartSeriesCollection>
5354
<StockChartSeries Name="AAPL" DataSource="@StockDetails" Type="ChartSeriesType.Candle" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Volume="Volume">
55+
@* Series Linear Gradient: defines color stops for the entire series *@
5456
<StockChartLinearGradient X1="0" Y1="0" X2="1" Y2="1">
5557
<StockChartGradientColorStops>
5658
<StockChartGradientColorStop Offset="0" Color="#FF7E5F" Opacity="1" Lighten="0" Brighten="1" />
@@ -97,13 +99,15 @@ Apply a linear gradient to a stock chart trendline by adding `StockChartLinearGr
9799
98100
@using Syncfusion.Blazor.Charts
99101
102+
@* Initialize the Stock Chart to display AAPL stock price using a Candle series *@
100103
<SfStockChart Title="AAPL Stock Price">
101104
<StockChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" />
102105
<StockChartPrimaryYAxis Interval="10" />
103106
<StockChartSeriesCollection>
104107
<StockChartSeries Name="Series1" DataSource="@StockDetails" Type="ChartSeriesType.Candle" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Volume="Volume">
105108
<StockChartTrendlines>
106109
<StockChartTrendline Type="TrendlineTypes.Linear" Width="4">
110+
@* Trendline Linear Gradient: applied to the trendline stroke *@
107111
<StockChartLinearGradient X1="0" Y1="0" X2="1" Y2="0">
108112
<StockChartGradientColorStops>
109113
<StockChartGradientColorStop Offset="0" Color="#6A0DAD" Opacity="1" />
@@ -151,6 +155,7 @@ Apply a linear gradient to a technical indicator by adding `StockChartLinearGrad
151155
152156
@using Syncfusion.Blazor.Charts
153157
158+
@* Initialize the Stock Chart to display AAPL stock price using a Candle series *@
154159
<SfStockChart Title="AAPL Stock Price">
155160
<StockChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" />
156161
<StockChartPrimaryYAxis Interval="10" />
@@ -161,6 +166,7 @@ Apply a linear gradient to a technical indicator by adding `StockChartLinearGrad
161166
162167
<StockChartIndicators>
163168
<StockChartIndicator Type="TechnicalIndicators.Ema" Field="FinancialDataFields.High" SeriesName="Series1" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Volume="Volume" Period="1" Width="4">
169+
@* Indicator Linear Gradient: applied to the EMA indicator line *@
164170
<StockChartLinearGradient X1="0" Y1="0" X2="1" Y2="1">
165171
<StockChartGradientColorStops>
166172
<StockChartGradientColorStop Offset="0" Color="#FFFF00" Opacity="1" Lighten="0.2" Brighten="1" />
@@ -224,12 +230,14 @@ Apply a radial gradient to a series by adding `StockChartRadialGradient` inside
224230
225231
@using Syncfusion.Blazor.Charts
226232
233+
@* Initialize the Stock Chart to display AAPL stock price using a Candle series *@
227234
<SfStockChart Title="AAPL Stock Price">
228235
<StockChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" />
229236
<StockChartPrimaryYAxis Interval="10" />
230237
231238
<StockChartSeriesCollection>
232239
<StockChartSeries Name="AAPL" DataSource="@StockDetails" Type="ChartSeriesType.Candle" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Volume="Volume">
240+
@* Series Radial Gradient: defines color stops for the entire series *@
233241
<StockChartRadialGradient Cx="0.5" Cy="0.5" Fx="0.5" Fy="0.5" R="0.5">
234242
<StockChartGradientColorStops>
235243
<StockChartGradientColorStop Offset="0" Color="#FFFF00" Opacity="1" Lighten="0" Brighten="1" />

0 commit comments

Comments
 (0)