The ASP.NET Core range area chart is used to show variation in data values for a given time. It is like the area series, except that the area between the high and low ranges is filled.
Mark data points with built-in shapes: circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, and pentagons. In addition to these shapes, use images to make the points more attractive.
Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by a given angle.
Handle missing data elegantly with empty points support.
The ASP.NET Core range area chart can be transposed vertically to view the data from a different perspective.
Customize the color and border of the range area chart using built-in APIs.
Enable zooming and panning when dealing with large amounts of data to focus on particular ranges.
Easily get started with ASP.NET Core Range Area using a few simple lines of C# code, as demonstrated below. Also explore our ASP.NET Core Range Area Chart Example that shows you how to render and configure the range area chart component.
<ejs-chart id="container">
<e-chart-primaryxaxis valueType="Category">
</e-chart-primaryxaxis>
<e-series-collection>
<e-series name="series1" size="yValue1" xName="xValue" high="yValue" low="yValue1" dataSource="ViewBag.dataSource"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.RangeArea">
</e-series>
</e-series-collection>
</ejs-chart>
public class HomeController : Controller
{
public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { xValue = "2014", yValue = 21, yValue1 = 21 },
new ChartData { xValue = "2015", yValue = 24, yValue1 = 31},
new ChartData { xValue = "2016", yValue = 36, yValue1 = 14 },
new ChartData { xValue = "2017", yValue = 38, yValue1 = 31 },
new ChartData { xValue = "2018", yValue = 54, yValue1 = 11 },
new ChartData { xValue = "2019", yValue = 57, yValue1 = 24 },
new ChartData { xValue = "2020", yValue = 70, yValue1 = 16 },
};
ViewBag.dataSource = chartData;
return View();
}
}
public class ChartData
{
public string xValue;
public double yValue;
public double yValue1;
}