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