How can I help you?
Sorting in Blazor Chart Component
4 Feb 20265 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, sorting is applied in Ascending order. The sorting order can be changed to descending by setting the Direction property to Descending in 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},
};
}