ASP.NET Core Spline Range Area Chart is used to display continuous data points as a set of splines that vary between high and low values over intervals of time and across different categories.
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.
ASP.NET Core Spline Range Area Chart can be transposed vertically to view the data from a different perspective.
Customize the color and border of ASP.NET Core Spline Range Area Chart using built-in APIs.
Enable zooming and panning support when dealing with large amounts of data to visualize a data point in any region.
Easily get started with ASP.NET Core Spline Range Area using a few simple lines of C# code, as demonstrated below. Also explore our ASP.NET Core Spline Range Area Chart Example that shows you how to render and configure the spline range area chart component.
<ejs-chart id="container">
<e-chart-primaryxaxis valueType="Category">
</e-chart-primaryxaxis>
<e-series-collection>
<e-series name="series1" xName="xValue" yName="yValue" dataSource="ViewBag.dataSource"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.SplineRangeArea">
</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 },
new ChartData { xValue = "2015", yValue = 24 },
new ChartData { xValue = "2016", yValue = 36 },
new ChartData { xValue = "2017", yValue = 38 },
new ChartData { xValue = "2018", yValue = 54 },
new ChartData { xValue = "2019", yValue = 57 },
new ChartData { xValue = "2020", yValue = 70 },
};
ViewBag.dataSource = chartData;
return View();
}
}
public class ChartData
{
public string xValue;
public double yValue;
}
Spline Range Area Chart User Guide
Learn the available options to customize ASP.NET Core spline range area chart.