Category axis are used to represent the string values instead of numbers.
@using Syncfusion.Blazor.Charts
<SfChart Width="60%">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
</ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@MedalDetails" 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 List<ChartData> MedalDetails = new List<ChartData>
{
new ChartData { X= "USA", YValue= 46 },
new ChartData { X= "GBR", YValue= 27 },
new ChartData { X= "CHN", YValue= 26 },
new ChartData { X= "UK", YValue= 23 },
new ChartData { X= "AUS", YValue= 16 },
new ChartData { X= "IND", YValue= 36 },
new ChartData { X= "DEN", YValue= 12 },
new ChartData { X= "MEX", YValue= 20 },
};
}
By default, category labels are placed between the ticks in an axis, this can also be placed on ticks
using LabelPlacement
property.
@using Syncfusion.Blazor.Charts
<SfChart Width="60%">
<ChartPrimaryXAxis LabelPlacement="LabelPlacement.OnTicks" ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
</ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@MedalDetails" 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 List<ChartData> MedalDetails = new List<ChartData>
{
new ChartData { X= "USA", YValue= 46 },
new ChartData { X= "GBR", YValue= 27 },
new ChartData { X= "CHN", YValue= 26 },
new ChartData { X= "UK", YValue= 23 },
new ChartData { X= "AUS", YValue= 16 },
new ChartData { X= "IND", YValue= 36 },
new ChartData { X= "DEN", YValue= 12 },
new ChartData { X= "MEX", YValue= 20 },
};
}
Range of the category axis can be customized using Minimum
,
Maximum
and Interval
property of
the axis.
@using Syncfusion.Blazor.Charts
<SfChart Width="60%">
<ChartPrimaryXAxis Maximum="5" Minimum="1" Interval="2" ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
</ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@MedalDetails" 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 List<ChartData> MedalDetails = new List<ChartData>
{
new ChartData { X= "USA", YValue= 46 },
new ChartData { X= "GBR", YValue= 27 },
new ChartData { X= "CHN", YValue= 26 },
new ChartData { X= "UK", YValue= 23 },
new ChartData { X= "AUS", YValue= 16 },
new ChartData { X= "IND", YValue= 36 },
new ChartData { X= "DEN", YValue= 12 },
new ChartData { X= "MEX", YValue= 20 },
};
}
Category axis also can be rendered based on the index values of data source. This can be achieved by defining the
IsIndexed
property to true
in the axis.
@using Syncfusion.Blazor.Charts
<SfChart Width="60%">
<ChartPrimaryXAxis IsIndexed="true" ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
</ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@WeatherReports1" XName="X" YName="Y" Type="ChartSeriesType.Column">
</ChartSeries>
<ChartSeries DataSource="@WeatherReports2" XName="X" YName="Y" Type="ChartSeriesType.Column">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code{
public class WeatherData
{
public string X { get; set; }
public double Y { get; set; }
}
public List<WeatherData> WeatherReports1 = new List<WeatherData>
{
new WeatherData{ X= "Myanmar", Y= 7.3 },
new WeatherData{ X= "India", Y= 7.9 },
new WeatherData{ X= "Bangladesh", Y= 6.8 },
new WeatherData{ X= "Cambodia", Y=7.0 },
new WeatherData{ X= "China", Y= 6.9 }
};
public List<WeatherData> WeatherReports2 = new List<WeatherData>
{
new WeatherData{ X= "Poland", Y=2.7 },
new WeatherData{ X= "Australia", Y=2.5 },
new WeatherData{ X= "Singapore", Y=2.0 },
new WeatherData{ X= "Canada", Y=1.4 },
new WeatherData{ X= "Germany", Y=1.8 }
};
}