Area in ASP.NET MVC Charts Component

17 Apr 202311 minutes to read

Area

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

@Html.EJS().Chart("container").Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Area).  
      XName("x").
      YName("y").
      DataSource(ViewBag.dataSource).
      Name("Gold").
      Add();
   })
   .PrimaryXAxis(px => 
         px.Interval(1)
            .ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
            .IsIndexed(true)
   )
   .Title("Olympic Medal Counts - RIO").Render()
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.

@Html.EJS().Chart("container").Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Area).  
      XName("x").
      YName("y").
      PointColorMapping("Color").
      DataSource(ViewBag.dataSource).
      Name("Gold").
      Add();
   })
   .PrimaryXAxis(px => 
         px.Interval(1)
            .ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
            .IsIndexed(true)
   )
   .Title("Olympic Medal Counts - RIO").Render()
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.
@Html.EJS().Chart("container").Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Area).  
      XName("x").
      YName("y").
      Opacity(0.3).
      Fill("blue").
      Border(br => br.Width(0)).
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category))
   .Render()
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.

@Html.EJS().Chart("container").Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Area).  
      XName("x").
      YName("y").
      DataSource(ViewBag.dataSource).
      Name("Gold").
      Border(Width:2).
      Add();
   })
   .PrimaryXAxis(px => 
         px.Interval(1)
            .ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
            .IsIndexed(true)
   )
   .Title("Olympic Medal Counts - RIO").Render()
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