Kendo chart grouped series sort issue

Question

I am using Kendo chart to display grouped series in ASP.net MVC project. Chart is sorting the series based on UserName field as a default. I have a requirement to display UserName field in Legends but need to sort the series using UserID field. It could be achieved by disabling the default sorting applied using UserName OR can change the sort field to UserID. Sort on datasource is not working here. How can I achieve this? My code is as foloows:

@(Html.Kendo().Chart<TestProject.Models.ItemViewModel>
()
.Name("TestChart")
.Legend(legend => legend.Position(ChartLegendPosition.Right)
    .Orientation(ChartLegendOrientation.Vertical)
)
.Tooltip(tooltip => tooltip.Visible(true))
.DataSource(ds => ds
    .Read(read => read.Action("Test_Chart_Read", "Test"))
    .Group(group => group.Add(model => model.UserName))
    .Sort(sort => sort.Add(m=>m.UserID).Ascending())
)
.Series(series =>{series.Bar(model => model.Salary).Name("#= group.value #");})
.CategoryAxis(axis => axis
    .Categories(model => model.UserName)
    .Labels(l => l.Rotation(-45).Position(ChartAxisLabelsPosition.Start).Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Line(line => line.Visible(true))
)
.Tooltip(tooltip => tooltip
.Visible(true)
)

)

giparekh giparekh · Accepted Answer · 2021-04-20T11:22:49

Found the solution in one of the old post on telerik forum (https://www.telerik.com/forums/legend-sort-order-issue).

Although, it gives an warning that the 'GroupNameTempalte' is obsolte, the solution is working fine. below is the code changes:

.DataSource(dataSource => dataSource
        .Read(read => read.Action("_StockData", "Scatter_Charts"))
        .Group(group => group.Add(model => model.MonthNumber))
    )
    .Series(series => {
        series.Line(model => model.Close)
            .Name("close")
            .GroupNameTemplate("#= group.items[0].MonthName #");

Kendo chart grouped series sort issue

1 Answers