Search code examples
c#asp.net-corebar-charttelerik-mvc

How to show vertical Bar Chart with Kendo UI?


I want to create a bar chart. Barchart works well. But the bar chart shows its horizontal axis. But I want to show the vertical axis. But I can't show it vertical position.

@(Html.Kendo().Chart()
                    .Name("chart")
                     .Title("Last 3 Month Emergency Assistance Status Summery")
                    .Legend(legend => legend.Position(ChartLegendPosition.Bottom) .Visible(true))
                    .ChartArea(chartArea => chartArea
                    .Background("transparent")
                    )
                    .Series(series =>
                    {
                        series.Bar(MonthwiseDataList.Select(x => x.Last3MonthTotalApproved).ToArray()).Name("Total Approved");
                        series.Bar(MonthwiseDataList.Select(x => x.Last3MonthTotalDenied).ToArray()).Name("Total Denied");
                     
                    })
                    .CategoryAxis(axis => axis.Name("label-axis").Labels(labels => labels.Rotation("auto")).Categories(MonthwiseDataList.Select(x => x.ApplicationDate.ToString("MMM-yyyy")).ToArray()).MinorGridLines(x => x.Visible(false)))
                    .ValueAxis(axis => axis.Numeric("StatusCount").Min(0).Max(MonthwiseDataList.Max(x => x.Total) + 1).Visible(true).Title("").Color("#dcdee8"))
                    .Tooltip(tooltip => tooltip
                    .Visible(true)
                    .Template("#= series.name #: #= value #")
                    )
                    )

Thank you in advance


Solution

  • The Bar type of the series displays the categories in horizontal order. However, if you would like to use the vertical order, I recommend using the Column series type instead:

    .Series(series =>
        {
            series.Column(MonthwiseDataList.Select(x => x.Last3MonthTotalApproved).ToArray()).Name("Total Approved");
            series.Column(MonthwiseDataList.Select(x => x.Last3MonthTotalDenied).ToArray()).Name("Total Denied");
        })