diff --git a/blazor-toc.html b/blazor-toc.html
index 17787b4638..a292e9b331 100644
--- a/blazor-toc.html
+++ b/blazor-toc.html
@@ -765,6 +765,9 @@
Title and Subtitle
+
+ Gradient
+
Print and Export
@@ -1498,6 +1501,9 @@
Trendlines
+
+ Gradient
+
Internationalization
@@ -4585,6 +4591,7 @@
Panning
Range Selector
Appearance
+ Gradient
Print and Export
Accessibility
Events
diff --git a/blazor/accumulation-chart/gradient.md b/blazor/accumulation-chart/gradient.md
new file mode 100644
index 0000000000..e553f5ead6
--- /dev/null
+++ b/blazor/accumulation-chart/gradient.md
@@ -0,0 +1,323 @@
+---
+layout: post
+title: Gradient in Blazor Accumulation Chart Component | Syncfusion
+description: Checkout and learn about applying linear and radial gradients to Accumulation Charts in Syncfusion Blazor Charts
+platform: Blazor
+control: Accumulation Chart
+documentation: ug
+---
+
+
+
+# Gradient in Blazor Accumulation Chart Component
+
+Gradients add depth and modern styling to charts by smoothly blending multiple colors. The Charts component supports two gradient types:
+
+- Linear gradient
+- Radial gradient
+
+## Linear gradient
+
+A linear gradient blends colors along a straight path from a defined start point to an end point. In accumulation charts, a linear gradient can be applied either to the whole series or to each point via the `OnPointRender` event. An `AccumulationChartLinearGradient` is configured with one or more color stops.
+
+Properties:
+- X1 - Horizontal start position of the gradient (0 to 1).
+- Y1 - Vertical start position of the gradient (0 to 1).
+- X2 - Horizontal end position of the gradient (0 to 1).
+- Y2 - Vertical end position of the gradient (0 to 1).
+
+Each color stop (`AccumulationChartGradientColorStop`) supports:
+- Offset - Position along the gradient (0 to 100).
+- Color - Base color at the stop.
+- Opacity - Transparency (0 to 1).
+- Lighten - Adjusts lightness (positive lightens, negative darkens).
+- Brighten - Adjusts brightness (positive increases, negative decreases).
+
+### Apply gradient to the entire series
+
+A linear gradient may be applied directly at the series level. The same gradient is applied uniformly to all data points, legend symbols and tooltip markers.
+
+```cshtml
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the AccumulationChart to display orders by category using a Pie series *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @* Series Linear Gradient: defines color stops for the entire series *@
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class CategoryPoint {
+ public string Category { get; set; }
+ public double Share { get; set; }
+ public string DataLabel { get; set; }
+ }
+
+ private readonly List CategoryData = new ()
+ {
+ new CategoryPoint { Category = "Electronics", Share = 22.5, DataLabel = "Electronics: 22.5%" },
+ new CategoryPoint { Category = "Fashion", Share = 18.0, DataLabel = "Fashion: 18.0%" },
+ new CategoryPoint { Category = "Home & Kitchen", Share = 15.5, DataLabel = "Home & Kitchen: 15.5%" },
+ new CategoryPoint { Category = "Beauty & Health", Share = 10.0, DataLabel = "Beauty & Health: 10.0%" },
+ new CategoryPoint { Category = "Sports & Outdoors", Share = 9.5, DataLabel = "Sports & Outdoors: 9.5%" },
+ new CategoryPoint { Category = "Books", Share = 8.0, DataLabel = "Books: 8.0%" },
+ new CategoryPoint { Category = "Toys & Games", Share = 7.0, DataLabel = "Toys & Games: 7.0%" },
+ new CategoryPoint { Category = "Groceries", Share = 6.0, DataLabel = "Groceries: 6.0%" },
+ new CategoryPoint { Category = "Other", Share = 3.5, DataLabel = "Other: 3.5%" }
+ };
+}
+
+```
+
+
+### Apply a gradient per point using the point render event
+
+A diagonal linear gradient can be applied per data point using the `OnPointRender` event for a clear light-to-shadow transition.
+
+```cshtml
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the AccumulationChart to display share of e-commerce orders by category using a Pie series *@
+
+ @* Point Render: applies a diagonal linear gradient per point *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class CategoryShare
+ {
+ public string? Category { get; set; }
+ public double Share { get; set; }
+ public string? DataLabelMappingName { get; set; }
+ }
+
+ private readonly List CategoryData = new ()
+ {
+ new CategoryShare { Category = "Electronics", Share = 22.5, DataLabelMappingName = "Electronics: 22.5%" },
+ new CategoryShare { Category = "Fashion", Share = 18.0, DataLabelMappingName = "Fashion: 18.0%" },
+ new CategoryShare { Category = "Home & Kitchen", Share = 15.5, DataLabelMappingName = "Home & Kitchen: 15.5%" },
+ new CategoryShare { Category = "Beauty & Health", Share = 10.0, DataLabelMappingName = "Beauty & Health: 10.0%" },
+ new CategoryShare { Category = "Sports & Outdoors", Share = 9.5, DataLabelMappingName = "Sports & Outdoors: 9.5%" },
+ new CategoryShare { Category = "Books", Share = 8.0, DataLabelMappingName = "Books: 8.0%" },
+ new CategoryShare { Category = "Toys & Games", Share = 7.0, DataLabelMappingName = "Toys & Games: 7.0%" },
+ new CategoryShare { Category = "Groceries", Share = 6.0, DataLabelMappingName = "Groceries: 6.0%" },
+ new CategoryShare { Category = "Other", Share = 3.5, DataLabelMappingName = "Other: 3.5%" }
+ };
+
+ private readonly string[] BaseColors = new[]
+ {
+ "#0072B2", "#E69F00", "#009E73", "#D55E00", "#CC79A7", "#56B4E9", "#F0E442", "#999999", "#7F3C8D"
+ };
+
+ private void OnPointRender(AccumulationPointRenderEventArgs args)
+ {
+ string baseColor = BaseColors[args.Point.Index % BaseColors.Length];
+ args.LinearGradient = new AccumulationChartLinearGradient
+ {
+ X1 = 0.05, Y1 = 0.0, X2 = 0.95, Y2 = 1.0,
+ GradientColorStops = new List
+ {
+ new AccumulationChartGradientColorStop { Offset = 0, Color = baseColor, Brighten = 0.85, Opacity = 1 },
+ new AccumulationChartGradientColorStop { Offset = 20, Color = baseColor, Brighten = 0.45, Opacity = 0.98 },
+ new AccumulationChartGradientColorStop { Offset = 50, Color = baseColor, Brighten = 0.00, Opacity = 0.96 },
+ new AccumulationChartGradientColorStop { Offset = 80, Color = baseColor, Brighten = -0.30, Opacity = 0.94 },
+ new AccumulationChartGradientColorStop { Offset = 100, Color = baseColor, Brighten = -0.55, Opacity = 0.92 }
+ }
+ };
+ }
+}
+
+```
+
+
+## Radial gradient
+
+Configure a radial gradient by assigning an `AccumulationChartRadialGradient` with one or more color stops inside the `OnPointRender` event. The following properties control the gradient appearance:
+
+- Cx - Normalized horizontal center of the gradient (0 to 1).
+- Cy - Normalized vertical center of the gradient (0 to 1).
+- Fx - Normalized horizontal focal point from which the gradient appears to originate (0 to 1).
+- Fy - Normalized vertical focal point (0 to 1).
+- R - Normalized radius of the gradient circle (0 to 1).
+
+Each color stop (`AccumulationChartGradientColorStop`) supports:
+- Offset - Position of the stop along the gradient (0 to 100).
+- Color - Base color at the stop.
+- Opacity - Transparency (0 to 1).
+- Lighten - Adjusts lightness (positive lightens, negative darkens).
+- Brighten - Adjusts brightness (positive increases, negative decreases).
+
+### Apply a radial gradient to the entire series
+
+A radial gradient can be applied directly at the series level. The same gradient is applied uniformly to all data points, legend symbols and tooltip markers.
+
+```cshtml
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the AccumulationChart to display orders by category using a Pie series *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @* Series Radial Gradient: defines color stops for the entire series *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class CategoryPoint {
+ public string Category { get; set; }
+ public double Share { get; set; }
+ public string DataLabel { get; set; }
+ }
+
+ private readonly List CategoryData = new ()
+ {
+ new CategoryPoint { Category = "Electronics", Share = 22.5, DataLabel = "Electronics: 22.5%" },
+ new CategoryPoint { Category = "Fashion", Share = 18.0, DataLabel = "Fashion: 18.0%" },
+ new CategoryPoint { Category = "Home & Kitchen", Share = 15.5, DataLabel = "Home & Kitchen: 15.5%" },
+ new CategoryPoint { Category = "Beauty & Health", Share = 10.0, DataLabel = "Beauty & Health: 10.0%" },
+ new CategoryPoint { Category = "Sports & Outdoors", Share = 9.5, DataLabel = "Sports & Outdoors: 9.5%" },
+ new CategoryPoint { Category = "Books", Share = 8.0, DataLabel = "Books: 8.0%" },
+ new CategoryPoint { Category = "Toys & Games", Share = 7.0, DataLabel = "Toys & Games: 7.0%" },
+ new CategoryPoint { Category = "Groceries", Share = 6.0, DataLabel = "Groceries: 6.0%" },
+ new CategoryPoint { Category = "Other", Share = 3.5, DataLabel = "Other: 3.5%" }
+ };
+}
+
+```
+
+
+### Apply a radial gradient per point using the point render event
+
+The following example uses a distinct color palette and an off-center radial gradient to create a clear light-to-shadow effect on each data point. The gradient is configured in `OnPointRender`, so each data point receives its own radial gradient derived from its base color.
+
+```cshtml
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the AccumulationChart to display share of e-commerce orders by category using a Pie series *@
+
+ @* Point Render: applies an off-center radial gradient per point *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class CategoryShare
+ {
+ public string? Category { get; set; }
+ public double Share { get; set; }
+ public string? DataLabelMappingName { get; set; }
+ }
+
+ private readonly List CategoryData = new ()
+ {
+ new CategoryShare { Category = "Electronics", Share = 22.5, DataLabelMappingName = "Electronics: 22.5%" },
+ new CategoryShare { Category = "Fashion", Share = 18.0, DataLabelMappingName = "Fashion: 18.0%" },
+ new CategoryShare { Category = "Home & Kitchen", Share = 15.5, DataLabelMappingName = "Home & Kitchen: 15.5%" },
+ new CategoryShare { Category = "Beauty & Health", Share = 10.0, DataLabelMappingName = "Beauty & Health: 10.0%" },
+ new CategoryShare { Category = "Sports & Outdoors", Share = 9.5, DataLabelMappingName = "Sports & Outdoors: 9.5%" },
+ new CategoryShare { Category = "Books", Share = 8.0, DataLabelMappingName = "Books: 8.0%" },
+ new CategoryShare { Category = "Toys & Games", Share = 7.0, DataLabelMappingName = "Toys & Games: 7.0%" },
+ new CategoryShare { Category = "Groceries", Share = 6.0, DataLabelMappingName = "Groceries: 6.0%" },
+ new CategoryShare { Category = "Other", Share = 3.5, DataLabelMappingName = "Other: 3.5%" }
+ };
+
+ private readonly string[] BaseColors = new[]
+ {
+ "#0072B2", "#E69F00", "#009E73", "#D55E00", "#CC79A7", "#56B4E9", "#F0E442", "#999999", "#7F3C8D"
+ };
+
+ private void OnPointRender(AccumulationPointRenderEventArgs args)
+ {
+ string baseColor = BaseColors[args.Point.Index % BaseColors.Length];
+ args.RadialGradient = new AccumulationChartRadialGradient
+ {
+ Cx = 0.35, Cy = 0.35, Fx = 0.35, Fy = 0.35, R = 0.85,
+ GradientColorStops = new List
+ {
+ new AccumulationChartGradientColorStop { Offset = 0, Color = baseColor, Brighten = 0.60, Opacity = 1 },
+ new AccumulationChartGradientColorStop { Offset = 35, Color = baseColor, Brighten = 0.30, Opacity = 1 },
+ new AccumulationChartGradientColorStop { Offset = 65, Color = baseColor, Brighten = 0.05, Opacity = 1 },
+ new AccumulationChartGradientColorStop { Offset = 85, Color = baseColor, Brighten = -0.15, Opacity = 1 },
+ new AccumulationChartGradientColorStop { Offset = 100, Color = baseColor, Brighten = -0.35, Opacity = 1 }
+ }
+ };
+ }
+}
+
+```
+
+
+N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data.
+
+## See also
+
+- [Data Label](./data-label)
+- [Tooltip](./tool-tip)
+- [Legend](./legend)
diff --git a/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-points.png b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-points.png
new file mode 100644
index 0000000000..91e071617b
Binary files /dev/null and b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-points.png differ
diff --git a/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-series.png b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-series.png
new file mode 100644
index 0000000000..2ba054aba2
Binary files /dev/null and b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-series.png differ
diff --git a/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-points.png b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-points.png
new file mode 100644
index 0000000000..981af7712d
Binary files /dev/null and b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-points.png differ
diff --git a/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-series.png b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-series.png
new file mode 100644
index 0000000000..1d4aab7945
Binary files /dev/null and b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-series.png differ
diff --git a/blazor/chart/gradient.md b/blazor/chart/gradient.md
new file mode 100644
index 0000000000..cc44c744be
--- /dev/null
+++ b/blazor/chart/gradient.md
@@ -0,0 +1,315 @@
+---
+layout: post
+title: Gradient in Blazor Charts Component | Syncfusion
+description: Checkout and learn about applying linear and radial gradients to series, trendlines and indicators in the Syncfusion Blazor Charts component.
+platform: Blazor
+control: Chart
+documentation: ug
+---
+
+
+
+# Gradient in Blazor Charts Component
+
+Gradients add depth and modern styling to charts by smoothly blending multiple colors. The Charts component supports two gradient types:
+
+- Linear gradient
+- Radial gradient
+
+Gradients can be applied to:
+
+- Series
+- Trendlines
+- Technical Indicators
+
+## Linear gradient
+
+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.
+
+In the `ChartLinearGradient`:
+- X1 - Sets the horizontal start position of the gradient (0 to 1).
+- Y1 - Sets the vertical start position of the gradient (0 to 1).
+- X2 - Sets the horizontal end position of the gradient (0 to 1).
+- Y2 - Sets the vertical end position of the gradient (0 to 1).
+
+In the `ChartGradientColorStop`:
+- Offset - Specifies the position of the color stop along the gradient (0 to 100).
+- Color - Sets the color at the stop.
+- Opacity - Defines the transparency of the stop (0 to 1).
+- Lighten - Adjusts lightness at the stop. Positive values lighten the color; negative values darken it.
+- Brighten - Adjusts brightness at the stop. Positive values increase brightness; negative values decrease it.
+
+### Series
+
+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.
+
+```cshtml
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the Chart to display monthly sales revenue by month using Column series *@
+
+
+
+
+
+
+ @* Series Linear Gradient: defines color stops for the entire series *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class SalesPoint
+ {
+ public string Month { get; set; }
+ public double Amount { get; set; }
+ }
+
+ public List SalesData = new ()
+ {
+ new SalesPoint { Month = "Jan", Amount = 78 },
+ new SalesPoint { Month = "Feb", Amount = 88 },
+ new SalesPoint { Month = "Mar", Amount = 99 },
+ new SalesPoint { Month = "Apr", Amount = 92 },
+ new SalesPoint { Month = "May", Amount = 95 },
+ new SalesPoint { Month = "Jun", Amount = 102 },
+ new SalesPoint { Month = "Jul", Amount = 110 },
+ new SalesPoint { Month = "Aug", Amount = 105 }
+ };
+}
+
+```
+
+
+### Trendlines
+
+Apply a linear gradient to a trendline by adding `ChartLinearGradient` inside the target Trendline.
+
+```cshtml
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the Chart to display orders processed by month using Spline series *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @* Trendline Linear Gradient: applied to trendline stroke *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class OrdersPoint
+ {
+ public string Month { get; set; }
+ public double Orders { get; set; }
+ }
+
+ public List OrdersData = new ()
+ {
+ new OrdersPoint { Month = "Jan", Orders = 24 },
+ new OrdersPoint { Month = "Feb", Orders = 30 },
+ new OrdersPoint { Month = "Mar", Orders = 27 },
+ new OrdersPoint { Month = "Apr", Orders = 34 },
+ new OrdersPoint { Month = "May", Orders = 41 },
+ new OrdersPoint { Month = "Jun", Orders = 37 },
+ new OrdersPoint { Month = "Jul", Orders = 49 },
+ new OrdersPoint { Month = "Aug", Orders = 45 },
+ new OrdersPoint { Month = "Sep", Orders = 39 },
+ new OrdersPoint { Month = "Oct", Orders = 46 },
+ new OrdersPoint { Month = "Nov", Orders = 54 },
+ new OrdersPoint { Month = "Dec", Orders = 52 }
+ };
+}
+
+```
+
+
+### Technical Indicators
+
+Apply a linear gradient to a technical indicator by adding `ChartLinearGradient` inside the target Indicator.
+
+```cshtml
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the Chart to display equity price by month using Candle series and EMA indicator *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @* Indicator Linear Gradient: applied to the EMA indicator line *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class EMAChartData
+ {
+ public DateTime Date { get; set; }
+ public double Open { get; set; }
+ public double High { get; set; }
+ public double Low { get; set; }
+ public double Close { get; set; }
+ public double Volume { get; set; }
+ }
+
+ public List PriceSeries = new ()
+ {
+ new EMAChartData { Date = new DateTime(2025, 01, 01), Open = 103.9, High = 106.8, Low = 102.5, Close = 105.6, Volume = 182540000 },
+ new EMAChartData { Date = new DateTime(2025, 02, 01), Open = 105.2, High = 108.1, Low = 103.4, Close = 106.9, Volume = 176310000 },
+ new EMAChartData { Date = new DateTime(2025, 03, 01), Open = 106.7, High = 110.6, Low = 105.1, Close = 108.7, Volume = 189250000 },
+ new EMAChartData { Date = new DateTime(2025, 04, 01), Open = 108.9, High = 110.9, Low = 106.8, Close = 107.6, Volume = 171900000 },
+ new EMAChartData { Date = new DateTime(2025, 05, 01), Open = 107.8, High = 112.3, Low = 106.9, Close = 111.4, Volume = 196700000 },
+ new EMAChartData { Date = new DateTime(2025, 06, 01), Open = 111.2, High = 114.9, Low = 110.0, Close = 113.6, Volume = 205600000 },
+ new EMAChartData { Date = new DateTime(2025, 07, 01), Open = 113.5, High = 117.3, Low = 112.2, Close = 116.0, Volume = 213400000 },
+ new EMAChartData { Date = new DateTime(2025, 08, 01), Open = 116.1, High = 119.2, Low = 114.6, Close = 118.1, Volume = 221900000 },
+ new EMAChartData { Date = new DateTime(2025, 09, 01), Open = 117.9, High = 120.7, Low = 116.0, Close = 116.8, Volume = 198300000 },
+ new EMAChartData { Date = new DateTime(2025, 10, 01), Open = 116.7, High = 121.6, Low = 116.1, Close = 119.9, Volume = 234600000 },
+ new EMAChartData { Date = new DateTime(2025, 11, 01), Open = 120.2, High = 123.9, Low = 118.8, Close = 122.5, Volume = 226100000 }
+ };
+}
+
+```
+
+
+## Radial gradient
+
+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.
+
+In the `ChartRadialGradient`:
+- Cx - Sets the normalized horizontal center of the gradient (0 to 1).
+- Cy - Sets the normalized vertical center of the gradient (0 to 1).
+- Fx - Sets the normalized horizontal focal point from which the gradient appears to originate (0 to 1).
+- Fy - Sets the normalized vertical focal point (0 to 1).
+- R - Sets the normalized radius of the gradient circle (0 to 1).
+
+In the `ChartGradientColorStop`:
+- Offset - Specifies the position of the color stop along the gradient (0 to 100).
+- Color - Sets the color at the stop.
+- Opacity - Defines the transparency of the stop (0 to 1).
+- Lighten - Adjusts lightness at the stop. Positive values lighten the color; negative values darken it.
+- Brighten - Adjusts brightness at the stop. Positive values increase brightness; negative values decrease it.
+
+### Series
+
+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.
+
+```cshtml
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the Chart to display monthly sales revenue by month using Column series *@
+
+
+
+
+
+
+ @* Series Radial Gradient: defines color stops for the entire series *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class SalesPoint
+ {
+ public string Month { get; set; }
+ public double Amount { get; set; }
+ }
+
+ public List SalesData = new ()
+ {
+ new SalesPoint { Month = "Jan", Amount = 78 },
+ new SalesPoint { Month = "Feb", Amount = 88 },
+ new SalesPoint { Month = "Mar", Amount = 99 },
+ new SalesPoint { Month = "Apr", Amount = 92 },
+ new SalesPoint { Month = "May", Amount = 95 },
+ new SalesPoint { Month = "Jun", Amount = 102 },
+ new SalesPoint { Month = "Jul", Amount = 110 },
+ new SalesPoint { Month = "Aug", Amount = 105 }
+ };
+}
+
+```
+
+
+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`.
+
+## See also
+
+* [Appearance](./chart-appearance.md)
+* [Markers](./data-markers.md)
+* [Legend](./legend.md)
+* [Tooltip](./tool-tip)
+* [Technical Indicators](./technical-indicators.md)
+* [Trendlines](./trend-lines.md)
\ No newline at end of file
diff --git a/blazor/chart/images/gradient/blazor-candle-chart-exponential-moving-average-linear-gradient.png b/blazor/chart/images/gradient/blazor-candle-chart-exponential-moving-average-linear-gradient.png
new file mode 100644
index 0000000000..9df78ab8f9
Binary files /dev/null and b/blazor/chart/images/gradient/blazor-candle-chart-exponential-moving-average-linear-gradient.png differ
diff --git a/blazor/chart/images/gradient/blazor-column-chart-linear-gradient.png b/blazor/chart/images/gradient/blazor-column-chart-linear-gradient.png
new file mode 100644
index 0000000000..1bf1f8a744
Binary files /dev/null and b/blazor/chart/images/gradient/blazor-column-chart-linear-gradient.png differ
diff --git a/blazor/chart/images/gradient/blazor-column-chart-radial-gradient.png b/blazor/chart/images/gradient/blazor-column-chart-radial-gradient.png
new file mode 100644
index 0000000000..eca1ea288a
Binary files /dev/null and b/blazor/chart/images/gradient/blazor-column-chart-radial-gradient.png differ
diff --git a/blazor/chart/images/gradient/blazor-spline-chart-linear-trendlines-linear-gradient.png b/blazor/chart/images/gradient/blazor-spline-chart-linear-trendlines-linear-gradient.png
new file mode 100644
index 0000000000..418206b197
Binary files /dev/null and b/blazor/chart/images/gradient/blazor-spline-chart-linear-trendlines-linear-gradient.png differ
diff --git a/blazor/stock-chart/gradient.md b/blazor/stock-chart/gradient.md
new file mode 100644
index 0000000000..3424051893
--- /dev/null
+++ b/blazor/stock-chart/gradient.md
@@ -0,0 +1,288 @@
+---
+layout: post
+title: Gradient in Blazor Stock Chart Component | Syncfusion
+description: Checkout and learn about applying linear and radial gradients to series, trendlines and indicators in the Syncfusion Blazor Stock Chart component.
+platform: Blazor
+control: Stock Chart
+documentation: ug
+---
+
+
+
+# Gradient in Blazor Stock Chart Component
+
+Gradients add depth and modern styling to stock charts by smoothly blending multiple colors. The Stock Chart component supports two gradient types:
+
+- Linear gradient
+- Radial gradient
+
+Gradients can be applied to:
+
+- Series
+- Trendlines
+- Technical Indicators
+
+## Linear gradient
+
+A linear gradient blends colors along a straight path from a defined start point to an end point. Configure it by adding `StockChartLinearGradient` 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 `StockChartGradientColorStop`.
+
+In the `StockChartLinearGradient`:
+- X1 - Sets the horizontal start position of the gradient (0 to 1).
+- Y1 - Sets the vertical start position of the gradient (0 to 1).
+- X2 - Sets the horizontal end position of the gradient (0 to 1).
+- Y2 - Sets the vertical end position of the gradient (0 to 1).
+
+In the `StockChartGradientColorStop`:
+- Offset - Specifies the position of the color stop along the gradient (0 to 100).
+- Color - Sets the color at the stop.
+- Opacity - Defines the transparency of the stop (0 to 1).
+- Lighten - Adjusts the lightness at the stop. Positive values lighten the color and negative values darken it.
+- Brighten - Adjusts the brightness at the stop. Positive values increase brightness and negative values decrease it.
+
+### Series
+
+Apply a linear gradient to a series by adding `StockChartLinearGradient` inside the target Series. The same gradient is applied to legend and tooltip markers for visual consistency.
+
+```cshtml
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the Stock Chart to display AAPL stock price using a Candle series *@
+
+
+
+
+
+
+ @* Series Linear Gradient: defines color stops for the entire series *@
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class StockChartData
+ {
+ public DateTime Date { get; set; }
+ public double Open { get; set; }
+ public double Low { get; set; }
+ public double Close { get; set; }
+ public double High { get; set; }
+ public double Volume { get; set; }
+ }
+
+ public List StockDetails = new ()
+ {
+ new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+ new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+ new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+ new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+ new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+ new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+ new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+ new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+ new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
+ };
+}
+
+```
+
+
+### Trendlines
+
+Apply a linear gradient to a stock chart trendline by adding `StockChartLinearGradient` inside the `StockChartTrendline`.
+
+```cshtml
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the Stock Chart to display AAPL stock price using a Candle series *@
+
+
+
+
+
+
+
+ @* Trendline Linear Gradient: applied to the trendline stroke *@
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class StockChartData
+ {
+ public DateTime Date { get; set; }
+ public double Open { get; set; }
+ public double Low { get; set; }
+ public double Close { get; set; }
+ public double High { get; set; }
+ public double Volume { get; set; }
+ }
+ public List StockDetails = new ()
+ {
+ new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+ new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+ new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+ new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+ new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+ new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+ new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+ new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+ new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
+ };
+}
+
+```
+
+
+### Technical Indicators
+
+Apply a linear gradient to a technical indicator by adding `StockChartLinearGradient` inside the target `StockChartIndicator`.
+
+```cshtml
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the Stock Chart to display AAPL stock price using a Candle series *@
+
+
+
+
+
+
+
+
+
+
+ @* Indicator Linear Gradient: applied to the EMA indicator line *@
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class StockChartData
+ {
+ public DateTime Date { get; set; }
+ public double Open { get; set; }
+ public double Low { get; set; }
+ public double Close { get; set; }
+ public double High { get; set; }
+ public double Volume { get; set; }
+ }
+ public List StockDetails = new ()
+ {
+ new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+ new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+ new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+ new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+ new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+ new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+ new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+ new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+ new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
+ };
+}
+
+```
+
+
+## Radial gradient
+
+A radial gradient blends colors outward from a central point. Configure it by adding `StockChartRadialGradient` 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 `StockChartGradientColorStop`.
+
+In the `StockChartRadialGradient`:
+- Cx - Sets the normalized horizontal center of the gradient (0 to 1).
+- Cy - Sets the normalized vertical center of the gradient (0 to 1).
+- Fx - Sets the normalized horizontal focal point from which the gradient appears to originate (0 to 1).
+- Fy - Sets the normalized vertical focal point (0 to 1).
+- R - Sets the normalized radius of the gradient circle (0 to 1).
+
+In the `StockChartGradientColorStop`:
+- Offset - Specifies the position of the color stop along the gradient (0 to 100).
+- Color - Sets the color at the stop.
+- Opacity - Defines the transparency of the stop (0 to 1).
+- Lighten - Adjusts the lightness at the stop. Positive values lighten and negative values darken the color.
+- Brighten - Adjusts the brightness at the stop. Positive values increase and negative values decrease it.
+
+### Series
+
+Apply a radial gradient to a series by adding `StockChartRadialGradient` inside the target Series.
+
+```cshtml
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the Stock Chart to display AAPL stock price using a Candle series *@
+
+
+
+
+
+
+ @* Series Radial Gradient: defines color stops for the entire series *@
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class StockChartData
+ {
+ public DateTime Date { get; set; }
+ public double Open { get; set; }
+ public double Low { get; set; }
+ public double Close { get; set; }
+ public double High { get; set; }
+ public double Volume { get; set; }
+ }
+ public List StockDetails = new ()
+ {
+ new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+ new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+ new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+ new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+ new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+ new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+ new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+ new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+ new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
+ };
+}
+
+```
+
+
+N> Radial gradients can also be applied to Trendlines and Technical Indicators in the same way by placing a `StockChartRadialGradient` with color stops inside the target `StockChartTrendline` or `StockChartIndicator`.
+
+## See also
+
+* [Axis Customization](./axis-customization)
+* [Tooltip](./tool-tip)
+* [Legend](./legend)
+* [Technical Indicators](./technical-indicators)
+* [Trendlines](./trend-lines)
diff --git a/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-indicators.png b/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-indicators.png
new file mode 100644
index 0000000000..89210ed59a
Binary files /dev/null and b/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-indicators.png differ
diff --git a/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-series.png b/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-series.png
new file mode 100644
index 0000000000..dbbbcd299b
Binary files /dev/null and b/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-series.png differ
diff --git a/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-trendlines.png b/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-trendlines.png
new file mode 100644
index 0000000000..fcecdcb8b3
Binary files /dev/null and b/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-trendlines.png differ
diff --git a/blazor/stock-chart/images/gradient/blazor-stock-chart-radial-gradient-series.png b/blazor/stock-chart/images/gradient/blazor-stock-chart-radial-gradient-series.png
new file mode 100644
index 0000000000..1c71967368
Binary files /dev/null and b/blazor/stock-chart/images/gradient/blazor-stock-chart-radial-gradient-series.png differ