From 12723cd954a7260ccf0d7af8b9662d0892cd5ccf Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 4 Feb 2025 15:38:31 +0200
Subject: [PATCH] kb(Chart): Add KB for sorting Chart categories
---
knowledge-base/chart-sort-categories.md | 112 ++++++++++++++++++++++++
1 file changed, 112 insertions(+)
create mode 100644 knowledge-base/chart-sort-categories.md
diff --git a/knowledge-base/chart-sort-categories.md b/knowledge-base/chart-sort-categories.md
new file mode 100644
index 000000000..2a9b4db09
--- /dev/null
+++ b/knowledge-base/chart-sort-categories.md
@@ -0,0 +1,112 @@
+---
+title: Sort Chart Categories
+description: How to sort horizontal axis categories in the Telerik Chart for Blazor, depending on data point values?
+type: how-to
+page_title: How to Sort Blazor Chart Categories
+slug: chart-kb-sort-categories
+tags: blazor, chart
+ticketid: 1677715
+res_type: 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 `Product`s.
+
+>caption Sort Chart categories by sorting Chart data items
+
+````RAZOR
+
+
+ @for (int s = 1; s <= ProductCount; s++)
+ {
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private List ChartData { get; set; } = new();
+
+ private Dictionary 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](slug:chart-kb-stacked-series-sum-label)
+* [Chart Series Stacking](slug://components/chart/stack)