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

See Also