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.

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

See Also