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;
        }

See Also