chart-sort-categories.md

title	description	type	page_title	slug	tags	ticketid	res_type
Sort Chart Categories	How to sort horizontal axis categories in the Telerik Chart for Blazor, depending on data point values?	how-to	How to Sort Blazor Chart Categories	chart-kb-sort-categories	blazor, chart	1677715	kb

Environment

Product

Chart for Blazor

Description

This KB answers the following questions:

• How to sort a stacked Chart by category total values?
• How to order the Telerik Blazor Chart categories by the aggregated sum values of the data items?
• How do you sort a stacked column Chart by category totals?

Solution

The Chart sorts its categories by their order of appearance in the data. To reorder the categories, you need to reorder the Chart data items, so that the CategoryField values occur in the same order as the desired category order.

The example below sorts the categories (Company) by the stacked value (sum) of each company's Revenue for all its Products.

caption Sort Chart categories by sorting Chart data items

<TelerikChart>
    <ChartSeriesItems>
        @for (int s = 1; s <= ProductCount; s++)
        {
            <ChartSeries @key="@s"
                         Type="ChartSeriesType.Column"
                         Data="@ChartData.Where( x => x.Product == $"Product {s}" ).ToList()"
                         CategoryField="@nameof(SalesData.Company)"
                         Field="@nameof(SalesData.Revenue)"
                         Name="@( $"Product {s}" )">
                <ChartSeriesStack Enabled="true" Group="default" />
                <ChartSeriesTooltip Visible="true" />
            </ChartSeries>
        }
    </ChartSeriesItems>

    <ChartValueAxes>
        <ChartValueAxis>
            <ChartValueAxisLabels Format="c2" />
        </ChartValueAxis>
    </ChartValueAxes>

    <ChartTitle Text="Revenue per Company and Product"></ChartTitle>

    <ChartLegend Position="ChartLegendPosition.Right">
    </ChartLegend>
</TelerikChart>

@code {
    private List<SalesData> ChartData { get; set; } = new();

    private Dictionary<string, decimal> SortedTotalRevenues { get; set; } = new();

    private const int CompanyCount = 5;
    private const int ProductCount = 3;

    protected override void OnInitialized()
    {
        for (int i = 1; i <= CompanyCount; i++)
        {
            for (int j = 1; j <= ProductCount; j++)
            {
                ChartData.Add(new SalesData()
                {
                    Product = $"Product {j}",
                    Revenue = Random.Shared.Next(1, 1000),
                    Company = $"Company {i}"
                });
            }
        }

        ChartData = ChartData
            .GroupBy(dataItem => dataItem.Company)
            .Select(group => new { Company = group.Key, TotalRevenue = group.Sum(groupItem => groupItem.Revenue), Data = group.ToList() })
            .OrderBy(anonymousObject => anonymousObject.TotalRevenue)
            .SelectMany(anonymousObject => anonymousObject.Data)
            .ToList();
    }

    public class SalesData
    {
        public int Id { get; set; }
        public string Product { get; set; } = string.Empty;
        public string Company { get; set; } = string.Empty;
        public decimal Revenue { get; set; }
    }
}

See Also

• How to display a stacked series sum label in the Telerik Blazor Chart
• Chart Series Stacking