How to Sort Series Points on Category Axis in Blazor Chart Component?

In Blazor Chart components, the category axis(X-axis) is determined by the first rendered series. If some categories are missing in that series, they will be excluded from the axis, resulting in inconsistent rendering across multiple series.

To ensure uniform category alignment, you must:

• Normalize the dataset by inserting 0 values for missing categories.
• Sort the data based on a predefined category order.

Implementation Steps

1. Define the Desired Category Order
   This ensures the X-axis labels follow a consistent sequence.

CategoryOrder = new List<string>
{
   "08/05-AM",
   "08/05-PM",
   "08/06-PM",
   "08/07-AM"
}; 

2. Normalize the Dataset
   Loop through each category and series. If a data point is missing, insert a placeholder with a value of 0.

foreach (var category in CategoryOrder)
{
   foreach (var series in SeriesInfos)
   {
       if (!ChartPoints.Any(p => p.Category == category && p.Series == series.Name))
       {
           ChartPoints.Add(new DataPoint(category, series.Name, 0));
       }
   }
} 

3. Sort the Data
   Sort first by the category order, then by the series order.

ChartPoints = ChartPoints
   .OrderBy(p => CategoryOrder.IndexOf(p.Category))
   .ThenBy(p => SeriesInfos.First(s => s.Name == p.Series).Order)
   .ToList(); 

Output

Live Sample

View Sample in Blazor Playground

Conclusion

I hope you enjoyed learning about how to sort series points on category axis in Blazor Chart Component.

You can refer to our Blazor Chart feature tour page to learn about its other groundbreaking feature representations. You can also explore our Blazor Chart Documentation to understand how to present and manipulate data.

For current customers, you can check out our Blazor components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our Blazor Chart and other Blazor components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!