How to Order Chart Series in Blazor Charts?

This article explains how to order chart series in Blazor Charts.

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 of the Chart. You can adjust the rendering order of chart series using the ZOrder property in ChartSeries. This property accepts 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 code example below 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" [email protected]>
             <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 features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Charts example to understand how to create and manipulate data.

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

If you have any questions 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!