Skip to content

Commit 1dc8d1a

Browse files
dimodidimodi
authored and
dimodi
committed
kb(Chart): Add KB for sorting Chart categories
1 parent 6deadae commit 1dc8d1a

File tree

1 file changed

+112
-0
lines changed

1 file changed

+112
-0
lines changed
+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
title: Sort Chart Categories
3+
description: How to sort horizontal axis categories in the Telerik Chart for Blazor, depending on data point values?
4+
type: how-to
5+
page_title: How to Sort Blazor Chart Categories
6+
slug: chart-kb-sort-categories
7+
tags: blazor, chart
8+
ticketid: 1677715
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Chart for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
## Description
24+
25+
This KB answers the following questions:
26+
27+
* How to sort a stacked Chart by category total values?
28+
* How to order the Telerik Blazor Chart categories by the aggregated sum values of the data items?
29+
* How do you sort a stacked column Chart by category totals?
30+
31+
## Solution
32+
33+
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.
34+
35+
The example below sorts the categories (`Company`) by the stacked value (sum) of each company's `Revenue` for all its `Product`s.
36+
37+
>caption Sort Chart categories by sorting Chart data items
38+
39+
````RAZOR
40+
<TelerikChart>
41+
<ChartSeriesItems>
42+
@for (int s = 1; s <= ProductCount; s++)
43+
{
44+
<ChartSeries @key="@s"
45+
Type="ChartSeriesType.Column"
46+
Data="@ChartData.Where( x => x.Product == $"Product {s}" ).ToList()"
47+
CategoryField="@nameof(SalesData.Company)"
48+
Field="@nameof(SalesData.Revenue)"
49+
Name="@( $"Product {s}" )">
50+
<ChartSeriesStack Enabled="true" Group="default" />
51+
<ChartSeriesTooltip Visible="true" />
52+
</ChartSeries>
53+
}
54+
</ChartSeriesItems>
55+
56+
<ChartValueAxes>
57+
<ChartValueAxis>
58+
<ChartValueAxisLabels Format="c2" />
59+
</ChartValueAxis>
60+
</ChartValueAxes>
61+
62+
<ChartTitle Text="Revenue per Company and Product"></ChartTitle>
63+
64+
<ChartLegend Position="ChartLegendPosition.Right">
65+
</ChartLegend>
66+
</TelerikChart>
67+
68+
@code {
69+
private List<SalesData> ChartData { get; set; } = new();
70+
71+
private Dictionary<string, decimal> SortedTotalRevenues { get; set; } = new();
72+
73+
private const int CompanyCount = 5;
74+
private const int ProductCount = 3;
75+
76+
protected override void OnInitialized()
77+
{
78+
for (int i = 1; i <= CompanyCount; i++)
79+
{
80+
for (int j = 1; j <= ProductCount; j++)
81+
{
82+
ChartData.Add(new SalesData()
83+
{
84+
Product = $"Product {j}",
85+
Revenue = Random.Shared.Next(1, 1000),
86+
Company = $"Company {i}"
87+
});
88+
}
89+
}
90+
91+
ChartData = ChartData
92+
.GroupBy(dataItem => dataItem.Company)
93+
.Select(group => new { Company = group.Key, TotalRevenue = group.Sum(groupItem => groupItem.Revenue), Data = group.ToList() })
94+
.OrderBy(anonymousObject => anonymousObject.TotalRevenue)
95+
.SelectMany(anonymousObject => anonymousObject.Data)
96+
.ToList();
97+
}
98+
99+
public class SalesData
100+
{
101+
public int Id { get; set; }
102+
public string Product { get; set; } = string.Empty;
103+
public string Company { get; set; } = string.Empty;
104+
public decimal Revenue { get; set; }
105+
}
106+
}
107+
````
108+
109+
## See Also
110+
111+
* [How to display a stacked series sum label in the Telerik Blazor Chart](slug:chart-kb-stacked-series-sum-label)
112+
* [Chart Series Stacking](slug://components/chart/stack)

0 commit comments

Comments
 (0)