Area in ASP.NET CORE Charts Component

17 Apr 202311 minutes to read

Area

To render a area series, use series Type as Area.

<ejs-chart id="container" width="60%">
    <e-chart-primaryxaxis valueType="Category">
    </e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Area"></e-series>
    </e-series-collection>
</ejs-chart>
public ActionResult Index()
        {
            List<AxisLabelData> chartData = new List<AxisLabelData>
            {
                new AxisLabelData { x= "South Korea", y= 39.4, color="red" },
                new AxisLabelData { x= "India", y= 61.3, color="green" }, 
                new AxisLabelData { x= "Pakistan", y= 20.4, color="#ff0097" },
                new AxisLabelData { x= "Germany", y= 65.1, color="crimson" }, 
                new AxisLabelData { x= "Australia", y= 15.8, color="blue" },
                new AxisLabelData { x= "Italy", y= 29.2, color="darkorange" },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class AxisLabelData
        {
            public string x;
            public double y;
            public string color;
        }

Multicolored area

To render a multicolored area series, use the series type as MultiColoredArea. The required Segments of the series can be customized using the Value, Color, and DashArray.

<ejs-chart id="container" width="60%">
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.MultiColoredArea">
            <e-segments>
                <e-segment value="2007" color="blue"></e-segment>
                <e-segment value="2009" color="red"></e-segment>
                <e-segment color="green"></e-segment>
            </e-segments>
        </e-series>
    </e-series-collection>
</ejs-chart>
public IActionResult Index()
        {
            List<ChartData> chartData = new List<ChartData>
            {
               new ChartData{ x= 2005, y= 28 },
               new ChartData{ x= 2006, y= 25},
               new ChartData{ x= 2007, y= 26 },
               new ChartData{ x= 2008, y= 27 },
               new ChartData{ x= 2009, y= 32}, 
               new ChartData{ x= 2010, y= 35 }, 
               new ChartData{ x= 2011, y= 25 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ChartData
        {
            public double x;
            public double y;
        }

Series customization

The following properties can be used to customize the Area series.

  • Fill – Specifies the color of the area series.
  • Opacity – Specifies the opacity of Fill.
  • DashArray – Specifies the dashes for series.
<ejs-chart id="container">
    <e-chart-primaryxaxis valueType="Category">
    </e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Area"
            opacity="0.3" fill="blue">
            <e-series-border width="0"></e-series-border>
        </e-series>
    </e-series-collection>
</ejs-chart>
public ActionResult Index()
        {
            List<AxisLabelData> chartData = new List<AxisLabelData>
            {
                new AxisLabelData { x= "South Korea", y= 39.4 },
                new AxisLabelData { x= "India", y= 61.3 }, 
                new AxisLabelData { x= "Pakistan", y= 20.4 },
                new AxisLabelData { x= "Germany", y= 65.1 }, 
                new AxisLabelData { x= "Australia", y= 15.8 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class AxisLabelData
        {
            public string x;
            public double y;
        }

Area Border

The Width and Fill properties in the Border can be used to customize the border of all area type series.

<ejs-chart id="container" width="60%">
    <e-chart-primaryxaxis valueType="Category">
    </e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Area"></e-series>
        <e-series-border width="2"></e-series-border>
    </e-series-collection>
</ejs-chart>
public ActionResult Index()
        {
            List<AxisLabelData> chartData = new List<AxisLabelData>
            {
                new AxisLabelData { x= "South Korea", y= 39.4, color="red" },
                new AxisLabelData { x= "India", y= 61.3, color="green" }, 
                new AxisLabelData { x= "Pakistan", y= 20.4, color="#ff0097" },
                new AxisLabelData { x= "Germany", y= 65.1, color="crimson" }, 
                new AxisLabelData { x= "Australia", y= 15.8, color="blue" },
                new AxisLabelData { x= "Italy", y= 29.2, color="darkorange" }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class AxisLabelData
        {
            public string x;
            public double y;
            public string color;
        }

See Also