Vertical Chart in ASP.NET MVC Charts Component
17 Apr 20233 minutes to read
In EJ2 chart, you can draw a chart in vertical manner by changing orientation of the axis. All series types support this feature. You can use IsTransposed
property in chart to render a chart in vertical manner.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Spline).
Marker(ViewBag.Marker).
XName("x").
YName("y").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).
Add();
}).
PrimaryXAxis(px =>
px.Interval(1)
.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
).
Title("Olympic Medal Counts - RIO")
.IsTransposed(true).Render()
public ActionResult Index()
{
List<VerticalData> chartData = new List<VerticalData>
{
new VerticalData{ x= 2005, y= 28 },
new VerticalData{ x= 2006, y= 25 },
new VerticalData{ x= 2007, y= 26 },
new VerticalData{ x= 2008, y= 27 },
new VerticalData{ x= 2009, y= 32 },
new VerticalData{ x= 2010, y= 35 },
new VerticalData{ x= 2011, y= 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class VerticalData
{
public double x;
public double y;
}