How to Order Chart Series in Blazor Charts?

This article explains how to order the chart series.

Ordering chart series

Blazor Charts provides an option to order the chart series using ZOrder property.

By default, chart series are rendered in the specified order within the ChartSeriesCollection for the Chart. You can adjust the rendering order of chart series using the ZOrder property in ChartSeries. This property holds a numeric value; by setting an integer value for each series, you control the order in which they are rendered. This ensures that the chart series are displayed in the specified order according to the ZOrder property.

The below code example demonstrates how to order the chart series.

@using Syncfusion.Blazor.Charts
<SfChart Height="40%">
  <ChartSeriesCollection>
       @foreach (SeriesData series in SeriesCollection)
         {
            <ChartSeries ZOrder="@series.Order" Name="@series.Name" Fill="@series.Fill" XName="X" YName="YValue" LegendShape="Syncfusion.Blazor.Charts.LegendShape.Circle" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingBar" DataSource=@series.Data>
             <ChartSeriesBorder Color="white" Width="1"></ChartSeriesBorder>
             <ChartMarker>
               <ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Bottom">
                 <ChartDataLabelFont Color="white" FontWeight="bold"></ChartDataLabelFont>
               </ChartDataLabel>
             </ChartMarker>
            </ChartSeries>
         }
   </ChartSeriesCollection>
</SfChart>

@code {  
   List<int> numbers = new List<int> { 3, 1, 0, 2 };
   List<SeriesData> SeriesCollection;
   int numberOfSeries = 4;
   protected override void OnInitialized()
   {
       base.OnInitialized();
       SeriesCollection = new List<SeriesData>();
       Random rand = new Random();

       for (int i = 1; i <= numberOfSeries; i++)
       {
           string randomColor = String.Format("#{0:X6}", rand.Next(0x1000000)); 
          
           SeriesCollection.Add(new SeriesData
               {
                   Name = "Series"+i,
                   Order = numbers[i -1],
                   Fill = randomColor, 
                   Data = new List<ChartData>()
                   {
                       new ChartData { X = "1", YValue = rand.Next(10, 100) }
                   }
               });
       }
   }
 
} 

Output

Live Sample for Ordering Series

Conclusion:

We hope you found this guide helpful in learning How to order chart series in Blazor Charts. For more features, visit our [Blazor Charts feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our [Blazor Charts example to understand how to create and manipulate data.

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

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