Sorting in Blazor Chart Component
10 Aug 20234 minutes to read
Sorting enables you to sort data in ascending or descending order. To sort the chart based on the y-axis value, set Y to the PropertyName property.
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Data
<SfChart Title="Sales History of Product X">
<ChartSorting PropertyName="Y" Direction="ListSortDirection.Ascending"></ChartSorting>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@SalesReports" XName="X" YName="YValue" Type="ChartSeriesType.Column"></ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code{
public class ChartData
{
public string X { get; set; }
public double YValue { get; set; }
public double Profit { get; set; }
}
public List<ChartData> SalesReports = new List<ChartData>
{
new ChartData { X= "USA", YValue= 46, Profit = 25},
new ChartData { X= "GBR", YValue= 30, Profit = 30},
new ChartData { X= "CHN", YValue= 25, Profit = 20},
new ChartData { X= "UK", YValue= 40, Profit = 15},
new ChartData { X= "AUS", YValue= 28, Profit = 10},
new ChartData { X= "IND", YValue= 35, Profit = 20},
new ChartData { X= "DEN", YValue= 30, Profit = 10},
new ChartData { X= "MEX", YValue= 20, Profit = 5},
};
}
Sorting order
By default, the sorting order will be from ascending to descending. The sorting order can be changed from descending to ascending by setting the Direction property as Descending in the ChartSorting.
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Data
<SfChart Title="Sales History of Product X">
<ChartSorting PropertyName="X" Direction="ListSortDirection.Descending"></ChartSorting>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@SalesReports" XName="X" YName="YValue" Type="ChartSeriesType.Column"></ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code{
public class ChartData
{
public string X { get; set; }
public double YValue { get; set; }
public double Profit { get; set; }
}
public List<ChartData> SalesReports = new List<ChartData>
{
new ChartData { X= "USA", YValue= 46, Profit = 25},
new ChartData { X= "GBR", YValue= 30, Profit = 30},
new ChartData { X= "CHN", YValue= 25, Profit = 20},
new ChartData { X= "UK", YValue= 40, Profit = 15},
new ChartData { X= "AUS", YValue= 28, Profit = 10},
new ChartData { X= "IND", YValue= 35, Profit = 20},
new ChartData { X= "DEN", YValue= 30, Profit = 10},
new ChartData { X= "MEX", YValue= 20, Profit = 5},
};
}
Sorting by custom value
Data can also be sorted based on any field in the data source by passing the field name to the PropertyName property in the ChartSorting.
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Data
<SfChart Title="Sales History of Product X">
<ChartSorting PropertyName="Profit" Direction="ListSortDirection.Ascending"></ChartSorting>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@SalesReports" XName="X" YName="YValue" Type="ChartSeriesType.Column"></ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code{
public class ChartData
{
public string X { get; set; }
public double YValue { get; set; }
public double Profit { get; set; }
}
public List<ChartData> SalesReports = new List<ChartData>
{
new ChartData { X= "USA", YValue= 46, Profit = 25},
new ChartData { X= "GBR", YValue= 30, Profit = 30},
new ChartData { X= "CHN", YValue= 25, Profit = 20},
new ChartData { X= "UK", YValue= 40, Profit = 15},
new ChartData { X= "AUS", YValue= 28, Profit = 10},
new ChartData { X= "IND", YValue= 35, Profit = 20},
new ChartData { X= "DEN", YValue= 30, Profit = 10},
new ChartData { X= "MEX", YValue= 20, Profit = 5},
};
}