Spline in ASP.NET MVC Charts Component
17 Apr 202310 minutes to read
Spline
To render a spline series, use series Type
as Spline
.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Spline).
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 },
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 },
new AxisLabelData { x= "Italy", y= 29.2 },
new AxisLabelData { x= "United Kingdom", y= 44.6 },
new AxisLabelData { x= "Saudi Arabia", y= 9.7 },
new AxisLabelData { x= "Russia", y= 40.8 },
new AxisLabelData { x= "Mexico", y= 31 },
new AxisLabelData { x= "Brazil", y= 75.9 },
new AxisLabelData { x= "China", y= 51.4 }
};
ViewBag.dataSource = chartData;
return View();
}
public class AxisLabelData
{
public string x;
public double y;
}
Type of spline
To specify the type of Spline Chart
, use SplineType
property. The spline types are Clamped, Cardinal, Monotonic and Natural.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Spline).
SplineType(Syncfusion.EJ2.Charts.SplineType.Cardinal)
XName("x").
YName("y").
DataSource(ViewBag.dataSource).
Add();
})
.PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category))
.Title("Olympic Medals").Width("60%").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 },
new AxisLabelData { x= "Italy", y= 29.2 },
new AxisLabelData { x= "United Kingdom", y= 44.6 },
new AxisLabelData { x= "Saudi Arabia", y= 9.7 },
new AxisLabelData { x= "Russia", y= 40.8 },
new AxisLabelData { x= "Mexico", y= 31 },
new AxisLabelData { x= "Brazil", y= 75.9 },
new AxisLabelData { x= "China", y= 51.4 }
};
ViewBag.dataSource = chartData;
return View();
}
public class AxisLabelData
{
public string x;
public double y;
}
Series customization
The following properties can be used to customize the Spline
series.
- Fill – Specifies the color of the series.
- Opacity – Specifies the opacity of Fill.
- Width – Specifies the width for series.
- DashArray – Specifies the dashes for series.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Spline).
XName("x").
YName("y").
DashArray("5,5").
Fill("blue").
Opacity(0.5).
Width(3).
DataSource(ViewBag.dataSource).
Add();
})
.PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category))
.Title("Olympic Medals").Width("60%").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 },
new AxisLabelData { x= "Italy", y= 29.2 },
new AxisLabelData { x= "United Kingdom", y= 44.6 },
new AxisLabelData { x= "Saudi Arabia", y= 9.7 },
new AxisLabelData { x= "Russia", y= 40.8 },
new AxisLabelData { x= "Mexico", y= 31 },
new AxisLabelData { x= "Brazil", y= 75.9 },
new AxisLabelData { x= "China", y= 51.4 }
};
ViewBag.dataSource = chartData;
return View();
}
public class AxisLabelData
{
public string x;
public double y;
}