Gradient in ASP.NET Core Stock chart control
18 Nov 201824 minutes to read
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
The gradient can be defined in the @{ } Razor code block or dynamically configured in the load event of the chart.
A linear gradient blends color along a straight path from a defined start point to an end point. Configure it by adding LinearGradient inside the target element (Series, Trendlines or Indicators) 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 gradient color stop values such as Offset, Color, Opacity, Lighten and Brighten are set using the ChartGradientColorStop property.
The linear gradient properties are:
-
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).
Properties for ChartGradientColorStop:
-
Offset- Position along the gradient (0 to 100). -
Color- Base color at the stop. -
Opacity- Transparency (0 to 1). -
Lighten- Adjusts the lightness at the stop. A value of 1 applies maximum lightening. Range: 0 to 1. -
Brighten- Adjusts brightness at the stop. Positive values increase brightness; negative values decrease it. Range: -1 to 1.
Series
Apply a linear gradient to a series by adding LinearGradient inside the target Series. The same gradient is applied to the series markers, legend symbol and tooltip marker for visual consistency.
@{
var linearGradient = new Syncfusion.EJ2.Charts.ChartLinearGradient
{
X1 = 0,
Y1 = 0,
X2 = 1,
Y2 = 1,
GradientColorStop = new List<Syncfusion.EJ2.Charts.ChartGradientColorStop>
{
new Syncfusion.EJ2.Charts.ChartGradientColorStop { Color = "#FF7E5F", Offset = 0, Opacity = 1, Lighten = 0, Brighten = 0 },
new Syncfusion.EJ2.Charts.ChartGradientColorStop { Color = "#FEB47B", Offset = 100, Opacity = 1, Lighten = 0, Brighten = 0.5 }
}
};
}
<ejs-stockchart id="container" title="AAPL Stock Price">
<e-stockchart-primaryxaxis valueType="DateTime"></e-stockchart-primaryxaxis>
<e-stockchart-primaryyaxis interval="10"></e-stockchart-primaryyaxis>
<e-stockchart-series-collection>
<e-stockchart-series dataSource="@ViewBag.dataSource" type="Candle"
xName="Date" high="High" low="Low" open="Open" close="Close"
volume="Volume" name="AAPL" linearGradient="@linearGradient">
</e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>public IActionResult Index()
{
List<StockData> chartData = new List<StockData>
{
new StockData { Date = new DateTime(2012, 4, 2), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
new StockData { Date = new DateTime(2012, 4, 9), Open = 89.4471, High = 92.0000, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
new StockData { Date = new DateTime(2012, 4, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
new StockData { Date = new DateTime(2012, 4, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
new StockData { Date = new DateTime(2012, 4, 30), Open = 85.4000, High = 85.4857, Low = 80.7385, Close = 80.7500, Volume = 615249365 },
new StockData { Date = new DateTime(2012, 5, 7), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
new StockData { Date = new DateTime(2012, 5, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
new StockData { Date = new DateTime(2012, 5, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
new StockData { Date = new DateTime(2012, 5, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
};
ViewBag.dataSource = chartData;
return View();
}
public class StockData
{
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; }
}Technical Indicators
Apply a linear gradient to a technical indicator by adding LinearGradient inside the target Indicator.
@{
var indicatorGradient = new Syncfusion.EJ2.Charts.ChartLinearGradient
{
X1 = 0,
Y1 = 0,
X2 = 0,
Y2 = 1,
GradientColorStop = new List<Syncfusion.EJ2.Charts.ChartGradientColorStop>
{
new Syncfusion.EJ2.Charts.ChartGradientColorStop { Color = "red", Offset = 0, Opacity = 1, Lighten = 0, Brighten = 0 },
new Syncfusion.EJ2.Charts.ChartGradientColorStop { Color = "blue", Offset = 100, Opacity = 1, Lighten = 0, Brighten = 0 }
}
};
}
<ejs-stockchart id="container" title="Historical Indian Rupee Rate (INR USD)" height="350">
<e-stockchart-primaryxaxis majorGridLines="new { color = 'transparent' }"
crosshairTooltip="new { enable = true }">
</e-stockchart-primaryxaxis>
<e-stockchart-primaryyaxis lineStyle="new { color = 'transparent' }"
majorTickLines="new { color = 'transparent', width = 0 }">
</e-stockchart-primaryyaxis>
<e-stockchart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-stockchart-chartarea>
<e-stockchart-border width="0"></e-stockchart-border>
<e-stockchart-series-collection>
<e-stockchart-series dataSource="@ViewBag.dataSource" type="Candle"
xName="date" high="high" low="low" open="open" close="close"
volume="volume" name="Apple Inc">
</e-stockchart-series>
</e-stockchart-series-collection>
<e-stockchart-indicators>
<e-stockchart-indicator type="Ema" field="Close" seriesName="Apple Inc"
xName="date" high="high" low="low" open="open" close="close"
period="10" linearGradient="@indicatorGradient">
</e-stockchart-indicator>
</e-stockchart-indicators>
<e-stockchart-crosshair enable="true"></e-stockchart-crosshair>
<e-stockchart-tooltipsettings enable="true"></e-stockchart-tooltipsettings>
<e-stockchart-seriestype></e-stockchart-seriestype>
<e-stockchart-indicatortype></e-stockchart-indicatortype>
<e-stockchart-exporttype></e-stockchart-exporttype>
</ejs-stockchart>public IActionResult Index()
{
List<StockData> chartData = new List<StockData>
{
new StockData { date = new DateTime(2012, 4, 2), open = 85.9757, high = 90.6657, low = 85.7685, close = 90.5257, volume = 660187068 },
new StockData { date = new DateTime(2012, 4, 9), open = 89.4471, high = 92.0000, low = 86.2157, close = 86.4614, volume = 912634864 },
new StockData { date = new DateTime(2012, 4, 16), open = 87.1514, high = 88.6071, low = 81.4885, close = 81.8543, volume = 1221746066 },
new StockData { date = new DateTime(2012, 4, 23), open = 81.5157, high = 88.2857, low = 79.2857, close = 86.1428, volume = 965935749 },
new StockData { date = new DateTime(2012, 4, 30), open = 85.4000, high = 85.4857, low = 80.7385, close = 80.7500, volume = 615249365 },
new StockData { date = new DateTime(2012, 5, 7), open = 80.2143, high = 82.2685, low = 79.8185, close = 80.9585, volume = 541742692 },
new StockData { date = new DateTime(2012, 5, 14), open = 80.3671, high = 81.0728, low = 74.5971, close = 75.7685, volume = 708126233 },
new StockData { date = new DateTime(2012, 5, 21), open = 76.3571, high = 82.3571, low = 76.2928, close = 80.3271, volume = 682076215 },
new StockData { date = new DateTime(2012, 5, 28), open = 81.5571, high = 83.0714, low = 80.0743, close = 80.1414, volume = 480059584 },
new StockData { date = new DateTime(2012, 6, 4), open = 80.2143, high = 82.9405, low = 78.3571, close = 82.9028, volume = 517577005 },
new StockData { date = new DateTime(2012, 6, 11), open = 83.9600, high = 84.0714, low = 80.9571, close = 82.0185, volume = 499693120 },
new StockData { date = new DateTime(2012, 6, 18), open = 81.5657, high = 84.2857, low = 81.4814, close = 83.1571, volume = 442172142 },
new StockData { date = new DateTime(2012, 6, 25), open = 82.4714, high = 83.4285, low = 80.8014, close = 83.4285, volume = 371529102 },
new StockData { date = new DateTime(2012, 7, 2), open = 83.5328, high = 87.7628, low = 83.3714, close = 86.5543, volume = 385906790 },
new StockData { date = new DateTime(2012, 7, 9), open = 86.4714, high = 88.5528, low = 84.6685, close = 86.4243, volume = 524235196 },
new StockData { date = new DateTime(2012, 7, 16), open = 86.4457, high = 87.9071, low = 86.1643, close = 86.3285, volume = 419537217 },
new StockData { date = new DateTime(2012, 7, 23), open = 84.9143, high = 87.0971, low = 81.4285, close = 83.5943, volume = 680773023 },
new StockData { date = new DateTime(2012, 7, 30), open = 84.4171, high = 88.2828, low = 83.9743, close = 87.9571, volume = 475109323 },
new StockData { date = new DateTime(2012, 8, 6), open = 88.1843, high = 89.2857, low = 87.8943, close = 88.8143, volume = 312826308 },
new StockData { date = new DateTime(2012, 8, 13), open = 89.0557, high = 92.5985, low = 89.0357, close = 92.5871, volume = 392867193 },
new StockData { date = new DateTime(2012, 8, 20), open = 92.8585, high = 96.4114, low = 92.5871, close = 94.7460, volume = 708614692 },
new StockData { date = new DateTime(2012, 8, 27), open = 97.1414, high = 97.2671, low = 93.8928, close = 95.0343, volume = 383807217 },
new StockData { date = new DateTime(2012, 9, 3), open = 95.1085, high = 97.4971, low = 94.9285, close = 97.2057, volume = 355722047 },
new StockData { date = new DateTime(2012, 9, 10), open = 97.2071, high = 99.5685, low = 93.7143, close = 98.7543, volume = 724042207 },
new StockData { date = new DateTime(2012, 9, 17), open = 99.9071, high = 100.7243,low = 99.0885, close = 100.0135,volume = 500166040 },
new StockData { date = new DateTime(2012, 9, 24), open = 98.1228, high = 99.3028, low = 94.3357, close = 95.3007, volume = 714507994 },
new StockData { date = new DateTime(2012, 10, 1), open = 95.8800, high = 96.6785, low = 92.9500, close = 93.2271, volume = 638543622 },
new StockData { date = new DateTime(2012, 10, 8), open = 92.4114, high = 92.5085, low = 89.0785, close = 89.9591, volume = 747127724 },
new StockData { date = new DateTime(2012, 10, 15), open = 90.3357, high = 93.2557, low = 87.0885, close = 87.1200, volume = 646996264 },
new StockData { date = new DateTime(2012, 10, 22), open = 87.4885, high = 90.7685, low = 84.4285, close = 86.2857, volume = 866040680 }
};
ViewBag.dataSource = chartData;
return View();
}
public class StockData
{
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; }
}Radial gradient
A radial gradient blends colors outward from a central point, creating a circular or elliptical color progression. Configure it by adding RadialGradient 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 RadialGradient properties. The color stop values such as Offset, Color, Opacity, Lighten, and Brighten are set using the ChartGradientColorStop property.
In the RadialGradient:
-
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. Range: 0 to 1. -
Brighten- Adjusts brightness at the stop. Positive values increase brightness; negative values decrease it. Ranges: -1 to 1.
Series
Apply a radial gradient to a series by adding RadialGradient inside the target Series. The same gradient is applied to the series markers, legend symbol and tooltip marker for visual consistency.
@{
var radialGradient = new Syncfusion.EJ2.Charts.ChartRadialGradient
{
Cx = 0.5,
Cy = 0.5,
R = 0.5,
Fx = 0.5,
Fy = 0.5,
GradientColorStop = new List<Syncfusion.EJ2.Charts.ChartGradientColorStop>
{
new Syncfusion.EJ2.Charts.ChartGradientColorStop { Color = "#FFFF00", Offset = 0, Opacity = 1, Lighten = 0, Brighten = 0 },
new Syncfusion.EJ2.Charts.ChartGradientColorStop { Color = "#7C3AED", Offset = 100, Opacity = 1, Lighten = 0, Brighten = 0 }
}
};
}
<ejs-stockchart id="container" title="AAPL Stock Price">
<e-stockchart-primaryxaxis majorGridLines="new { width = 0 }"></e-stockchart-primaryxaxis>
<e-stockchart-primaryyaxis majorGridLines="new { width = 0 }" interval="10"></e-stockchart-primaryyaxis>
<e-stockchart-series-collection>
<e-stockchart-series dataSource="@ViewBag.dataSource" type="Candle"
xName="Date" high="High" low="Low" open="Open" close="Close"
volume="Volume" name="AAPL" radialGradient="@radialGradient">
</e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>public IActionResult Index()
{
List<StockData> chartData = new List<StockData>
{
new StockData { Date = new DateTime(2012, 4, 2), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
new StockData { Date = new DateTime(2012, 4, 9), Open = 89.4471, High = 92.0000, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
new StockData { Date = new DateTime(2012, 4, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
new StockData { Date = new DateTime(2012, 4, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
new StockData { Date = new DateTime(2012, 4, 30), Open = 85.4000, High = 85.4857, Low = 80.7385, Close = 80.7500, Volume = 615249365 },
new StockData { Date = new DateTime(2012, 5, 7), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
new StockData { Date = new DateTime(2012, 5, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
new StockData { Date = new DateTime(2012, 5, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
new StockData { Date = new DateTime(2012, 5, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
};
ViewBag.dataSource = chartData;
return View();
}
public class StockData
{
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; }
}Technical Indicators
Apply a radial gradient to a technical indicator by adding RadialGradient inside the target Indicator.
@{
var indicatorGradient = new Syncfusion.EJ2.Charts.ChartRadialGradient
{
Cx = 0.5,
Cy = 0.5,
Fx = 0.5,
Fy = 0.5,
R = 0.5,
GradientColorStop = new List<Syncfusion.EJ2.Charts.ChartGradientColorStop>
{
new Syncfusion.EJ2.Charts.ChartGradientColorStop { Color = "red", Offset = 0, Opacity = 1, Lighten = 0, Brighten = 0 },
new Syncfusion.EJ2.Charts.ChartGradientColorStop { Color = "blue", Offset = 100, Opacity = 1, Lighten = 0, Brighten = 0 }
}
};
}
<ejs-stockchart id="container" title="Historical Indian Rupee Rate (INR USD)" height="350">
<e-stockchart-primaryxaxis majorGridLines="new { color = 'transparent' }"
crosshairTooltip="new { enable = true }">
</e-stockchart-primaryxaxis>
<e-stockchart-primaryyaxis lineStyle="new { color = 'transparent' }"
majorTickLines="new { color = 'transparent', width = 0 }">
</e-stockchart-primaryyaxis>
<e-stockchart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-stockchart-chartarea>
<e-stockchart-border width="0"></e-stockchart-border>
<e-stockchart-series-collection>
<e-stockchart-series dataSource="@ViewBag.dataSource" type="Candle"
xName="date" high="high" low="low" open="open" close="close"
volume="volume" name="Apple Inc">
</e-stockchart-series>
</e-stockchart-series-collection>
<e-stockchart-indicators>
<e-stockchart-indicator type="Ema" field="Close" seriesName="Apple Inc"
xName="date" high="high" low="low" open="open" close="close"
period="10" radialGradient="@indicatorGradient">
</e-stockchart-indicator>
</e-stockchart-indicators>
<e-stockchart-crosshair enable="true"></e-stockchart-crosshair>
<e-stockchart-tooltipsettings enable="true"></e-stockchart-tooltipsettings>
<e-stockchart-seriestype></e-stockchart-seriestype>
<e-stockchart-indicatortype></e-stockchart-indicatortype>
<e-stockchart-exporttype></e-stockchart-exporttype>
</ejs-stockchart>public IActionResult Index()
{
List<StockData> chartData = new List<StockData>
{
new StockData { date = new DateTime(2012, 4, 2), open = 85.9757, high = 90.6657, low = 85.7685, close = 90.5257, volume = 660187068 },
new StockData { date = new DateTime(2012, 4, 9), open = 89.4471, high = 92.0000, low = 86.2157, close = 86.4614, volume = 912634864 },
new StockData { date = new DateTime(2012, 4, 16), open = 87.1514, high = 88.6071, low = 81.4885, close = 81.8543, volume = 1221746066 },
new StockData { date = new DateTime(2012, 4, 23), open = 81.5157, high = 88.2857, low = 79.2857, close = 86.1428, volume = 965935749 },
new StockData { date = new DateTime(2012, 4, 30), open = 85.4000, high = 85.4857, low = 80.7385, close = 80.7500, volume = 615249365 },
new StockData { date = new DateTime(2012, 5, 7), open = 80.2143, high = 82.2685, low = 79.8185, close = 80.9585, volume = 541742692 },
new StockData { date = new DateTime(2012, 5, 14), open = 80.3671, high = 81.0728, low = 74.5971, close = 75.7685, volume = 708126233 },
new StockData { date = new DateTime(2012, 5, 21), open = 76.3571, high = 82.3571, low = 76.2928, close = 80.3271, volume = 682076215 },
new StockData { date = new DateTime(2012, 5, 28), open = 81.5571, high = 83.0714, low = 80.0743, close = 80.1414, volume = 480059584 },
new StockData { date = new DateTime(2012, 6, 4), open = 80.2143, high = 82.9405, low = 78.3571, close = 82.9028, volume = 517577005 },
new StockData { date = new DateTime(2012, 6, 11), open = 83.9600, high = 84.0714, low = 80.9571, close = 82.0185, volume = 499693120 },
new StockData { date = new DateTime(2012, 6, 18), open = 81.5657, high = 84.2857, low = 81.4814, close = 83.1571, volume = 442172142 },
new StockData { date = new DateTime(2012, 6, 25), open = 82.4714, high = 83.4285, low = 80.8014, close = 83.4285, volume = 371529102 },
new StockData { date = new DateTime(2012, 7, 2), open = 83.5328, high = 87.7628, low = 83.3714, close = 86.5543, volume = 385906790 },
new StockData { date = new DateTime(2012, 7, 9), open = 86.4714, high = 88.5528, low = 84.6685, close = 86.4243, volume = 524235196 },
new StockData { date = new DateTime(2012, 7, 16), open = 86.4457, high = 87.9071, low = 86.1643, close = 86.3285, volume = 419537217 },
new StockData { date = new DateTime(2012, 7, 23), open = 84.9143, high = 87.0971, low = 81.4285, close = 83.5943, volume = 680773023 },
new StockData { date = new DateTime(2012, 7, 30), open = 84.4171, high = 88.2828, low = 83.9743, close = 87.9571, volume = 475109323 },
new StockData { date = new DateTime(2012, 8, 6), open = 88.1843, high = 89.2857, low = 87.8943, close = 88.8143, volume = 312826308 },
new StockData { date = new DateTime(2012, 8, 13), open = 89.0557, high = 92.5985, low = 89.0357, close = 92.5871, volume = 392867193 },
new StockData { date = new DateTime(2012, 8, 20), open = 92.8585, high = 96.4114, low = 92.5871, close = 94.7460, volume = 708614692 },
new StockData { date = new DateTime(2012, 8, 27), open = 97.1414, high = 97.2671, low = 93.8928, close = 95.0343, volume = 383807217 },
new StockData { date = new DateTime(2012, 9, 3), open = 95.1085, high = 97.4971, low = 94.9285, close = 97.2057, volume = 355722047 },
new StockData { date = new DateTime(2012, 9, 10), open = 97.2071, high = 99.5685, low = 93.7143, close = 98.7543, volume = 724042207 },
new StockData { date = new DateTime(2012, 9, 17), open = 99.9071, high = 100.7243,low = 99.0885, close = 100.0135,volume = 500166040 },
new StockData { date = new DateTime(2012, 9, 24), open = 98.1228, high = 99.3028, low = 94.3357, close = 95.3007, volume = 714507994 },
new StockData { date = new DateTime(2012, 10, 1), open = 95.8800, high = 96.6785, low = 92.9500, close = 93.2271, volume = 638543622 },
new StockData { date = new DateTime(2012, 10, 8), open = 92.4114, high = 92.5085, low = 89.0785, close = 89.9591, volume = 747127724 },
new StockData { date = new DateTime(2012, 10, 15), open = 90.3357, high = 93.2557, low = 87.0885, close = 87.1200, volume = 646996264 },
new StockData { date = new DateTime(2012, 10, 22), open = 87.4885, high = 90.7685, low = 84.4285, close = 86.2857, volume = 866040680 }
};
ViewBag.dataSource = chartData;
return View();
}
public class StockData
{
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; }
}