Stacked Area in ASP.NET CORE Charts Component

17 Apr 20239 minutes to read

Stacked Area

To render a stacked area series, use series Type as StackingArea.

<ejs-chart id="container" width="60%">
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea">
        </e-series>
        <e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y1"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea">
        </e-series>
        <e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y2"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea">
        </e-series>
    </e-series-collection>
</ejs-chart>
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 Stacked Area series.

<ejs-chart id="container" width="60%">
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" opacity="0.7" dashArray="5,5" fill="pink" yName="y"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea">
            <e-series-border width="2" color="black"></e-series-border>
        </e-series>
        <e-series dataSource="ViewBag.dataSource" xName="x" opacity="0.7" dashArray="5,5" fill="blue" yName="y1"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea">
            <e-series-border width="2" color="black"></e-series-border>
        </e-series>
        <e-series dataSource="ViewBag.dataSource" xName="x" opacity="0.7" dashArray="5,5" fill="green" yName="y2"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea">
            <e-series-border width="2" color="black"></e-series-border>
        </e-series>
    </e-series-collection>
</ejs-chart>
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