100% Stacked Area in ASP.NET MVC Charts Component
17 Apr 20239 minutes to read
100% Stacked Area Chart
To render a 100% stacked area series, use series Type
as StackingArea100
.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea100).
XName("x").
YName("y").
DataSource(ViewBag.dataSource).
Name("Gold").
Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea100).
XName("x").
YName("y1").
DataSource(ViewBag.dataSource).
Name("Silver").
Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea100).
XName("x").
YName("y2").
DataSource(ViewBag.dataSource).
Name("Platinum").
Add();
})
.PrimaryXAxis(px =>
px.Interval(1)
.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
.IsIndexed(true)
)
.Title("Olympic Medal Counts - RIO").Render()
public IActionResult Index()
{
List<PolarData> chartData = new List<PolarData>
{
new PolarData{ x=2000, y= 0.61, y1= 0.03, y2= 0.48},
new PolarData{ x=2001, y= 0.81, y1= 0.05, y2= 0.53 },
new PolarData{ x=2002, y= 0.91, y1= 0.06, y2= 0.57 },
new PolarData{ x=2003, y= 1, y1= 0.09, y2= 0.61 },
new PolarData{ x=2004, y= 1.19, y1= 0.14, y2= 0.63 },
new PolarData{ x=2005, y= 1.47, y1= 0.20, y2= 0.64 },
new PolarData{ x=2006, y= 1.74, y1= 0.29, y2= 0.66 },
new PolarData{ x=2007, y= 1.98, y1= 0.46, y2= 0.76 },
new PolarData{ x=2008, y= 1.99, y1= 0.64, y2= 0.77 },
new PolarData{ x=2009, y= 1.70, y1= 0.75, y2= 0.55 }
};
ViewBag.dataSource = chartData;
return View();
}
public class PolarData
{
public double x;
public double y;
public double y1;
public double y2;
}
Series customization
The following properties can be used to customize the 100% Stacked Area
series.
- Fill – Specifies the color of the series.
- Opacity – Specifies the opacity of Fill.
- DashArray – Specifies the dashes for series.
-
ChartSeriesBorder – Specifies the
Color
andWidth
of series border.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea100).
XName("x").
YName("y").
DataSource(ViewBag.dataSource).
Name("Gold").
Fill("pink").
Opacity(0.7).
DashArray("5,5").
Border(br => br.Width(2).Color("black")).
Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea100).
XName("x").
YName("y1").
DataSource(ViewBag.dataSource).
Name("Silver").
Fill("blue").
Opacity(0.7).
DashArray("5,5").
Border(br => br.Width(2).Color("black")).
Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea100).
XName("x").
YName("y2").
DataSource(ViewBag.dataSource).
Name("Platinum").
Fill("green").
Opacity(0.7).
DashArray("5,5").
Border(br => br.Width(2).Color("black")).
Add();
})
.PrimaryXAxis(px =>
px.Interval(1)
.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
.IsIndexed(true)
)
.Title("Olympic Medal Counts - RIO").Render()
public IActionResult Index()
{
List<PolarData> chartData = new List<PolarData>
{
new PolarData{ x=2000, y= 0.61, y1= 0.03, y2= 0.48},
new PolarData{ x=2001, y= 0.81, y1= 0.05, y2= 0.53 },
new PolarData{ x=2002, y= 0.91, y1= 0.06, y2= 0.57 },
new PolarData{ x=2003, y= 1, y1= 0.09, y2= 0.61 },
new PolarData{ x=2004, y= 1.19, y1= 0.14, y2= 0.63 },
new PolarData{ x=2005, y= 1.47, y1= 0.20, y2= 0.64 },
new PolarData{ x=2006, y= 1.74, y1= 0.29, y2= 0.66 },
new PolarData{ x=2007, y= 1.98, y1= 0.46, y2= 0.76 },
new PolarData{ x=2008, y= 1.99, y1= 0.64, y2= 0.77 },
new PolarData{ x=2009, y= 1.70, y1= 0.75, y2= 0.55 }
};
ViewBag.dataSource = chartData;
return View();
}
public class PolarData
{
public double x;
public double y;
public double y1;
public double y2;
}