Category axis is used to represent 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, the category labels are placed between the ticks, which can also be placed on the ticks using the 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 the Minimum
,
Maximum
and Interval
properties 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 },
};
}
The category axis can also be rendered on the basis of data source index values. This can be achieved by defining the
IsIndexed
property as 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 }
};
}
Note: You can refer to our
Blazor Charts
feature tour page for its groundbreaking feature representations. You can also explore ourBlazor Chart example
to knows various chart types and how to represent time-dependent data, showing trends in data at equal intervals.