Stacked Line Chart in ASP.NET MVC Charts Component
17 Apr 202310 minutes to read
Stacked Line
To render a stacked line series, use series Type
as StackingLine
.
@Html.EJS().Chart("container-vertical").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine)
.Marker(mkr => mkr.Visible(true)).XName("x").YName("y").DataSource(ViewBag.dataSource)
.Name("John").DashArray("5,1").Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine)
.Marker(mkr => mkr.Visible(true)).XName("x").YName("y1").DataSource(ViewBag.dataSource)
.Name("Peter").DashArray("5,1").Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine)
.Marker(mkr => mkr.Visible(true)).XName("x").YName("y2").DataSource(ViewBag.dataSource)
.Name("Steve").DashArray("5,1").Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine)
.Marker(mkr => mkr.Visible(true)).XName("x").YName("y3").DataSource(ViewBag.dataSource)
.Name("Charle").DashArray("5,1").Add();
})
.PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category))
.Title("Family Expense for Month")
.Render()
public ActionResult Index()
{
List<StackedLineChartData> chartData = new List<StackedLineChartData>
{
new StackedLineChartData { x= "Food", y= 90, y1= 40, y2= 70, y3= 120 },
new StackedLineChartData { x= "Transport", y= 80, y1= 90, y2= 110, y3= 70 },
new StackedLineChartData { x= "Medical", y= 50, y1= 80, y2= 120, y3= 50 },
new StackedLineChartData { x= "Clothes", y= 70, y1= 30, y2= 60, y3= 180 },
new StackedLineChartData { x= "Personal Care", y= 30, y1= 80, y2= 80, y3= 30 },
new StackedLineChartData { x= "Books", y= 10, y1= 40, y2= 30, y3= 270 },
new StackedLineChartData { x= "Fitness", y= 100,y1= 30, y2= 70, y3= 40 },
new StackedLineChartData { x= "Electricity", y= 55, y1= 95, y2= 55, y3= 75 },
new StackedLineChartData { x= "Tax", y= 20, y1= 50, y2= 40, y3= 65 },
new StackedLineChartData { x= "Pet Care", y= 40, y1= 20, y2= 80, y3= 95 },
new StackedLineChartData { x= "Education", y= 45, y1= 15, y2= 45, y3= 195 },
new StackedLineChartData { x= "Entertainment", y= 75, y1= 45, y2= 65, y3= 115 }
};
ViewBag.dataSource = chartData;
return View();
}
public class StackedLineChartData
{
public string x;
public double y;
public double y1;
public double y2;
public double y3;
}
Series customization
The following properties can be used to customize the Stacked Line
series.
- Fill – Specifies the color of the series.
- Opacity – Specifies the opacity of Fill.
- Width – Specifies the width for series.
- DashArray – Specifies the dashes for series.
@Html.EJS().Chart("container-vertical").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine)
.Marker(mkr => mkr.Visible(true)).XName("x").YName("y").DataSource(ViewBag.dataSource)
.Name("John").DashArray("5,1").Width(2).Opacity(0.7).Fill("blue").Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine)
.Marker(mkr => mkr.Visible(true)).XName("x").YName("y1").DataSource(ViewBag.dataSource)
.Name("Peter").DashArray("5,1").Width(2).Opacity(0.7).Fill("green").Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine)
.Marker(mkr => mkr.Visible(true)).XName("x").YName("y2").DataSource(ViewBag.dataSource)
.Name("Steve").DashArray("5,1").Width(2).Opacity(0.7).Fill("red").Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine)
.Marker(mkr => mkr.Visible(true)).XName("x").YName("y3").DataSource(ViewBag.dataSource)
.Name("Charle").DashArray("5,1").Width(2).Opacity(0.7).Fill("black").Add();
})
.PrimaryXAxis(px =>
px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
.Interval(1)
)
.PrimaryYAxis(py =>
py.Title("Expense")
.Interval(100)
.LabelFormat("${value}")
)
.Title("Family Expense for Month")
.Render()
public ActionResult Index()
{
List<StackedLineChartData> chartData = new List<StackedLineChartData>
{
new StackedLineChartData { x= "Food", y= 90, y1= 40, y2= 70, y3= 120 },
new StackedLineChartData { x= "Transport", y= 80, y1= 90, y2= 110, y3= 70 },
new StackedLineChartData { x= "Medical", y= 50, y1= 80, y2= 120, y3= 50 },
new StackedLineChartData { x= "Clothes", y= 70, y1= 30, y2= 60, y3= 180 },
new StackedLineChartData { x= "Personal Care", y= 30, y1= 80, y2= 80, y3= 30 },
new StackedLineChartData { x= "Books", y= 10, y1= 40, y2= 30, y3= 270 },
new StackedLineChartData { x= "Fitness", y= 100,y1= 30, y2= 70, y3= 40 },
new StackedLineChartData { x= "Electricity", y= 55, y1= 95, y2= 55, y3= 75 },
new StackedLineChartData { x= "Tax", y= 20, y1= 50, y2= 40, y3= 65 },
new StackedLineChartData { x= "Pet Care", y= 40, y1= 20, y2= 80, y3= 95 },
new StackedLineChartData { x= "Education", y= 45, y1= 15, y2= 45, y3= 195 },
new StackedLineChartData { x= "Entertainment", y= 75, y1= 45, y2= 65, y3= 115 }
};
ViewBag.dataSource = chartData;
return View();
}
public class StackedLineChartData
{
public string x;
public double y;
public double y1;
public double y2;
public double y3;
}