Categorical Axis

The categorical axis displays a set of categories. The values for each category do not define the order in which they appear. Here is an example of a categorical axis with a few data points.

Example 1: Chart with categorical axis

XAML

	<telerik:RadCartesianChart>
		<telerik:RadCartesianChart.HorizontalAxis>
			<telerik:CategoricalAxis/>
		</telerik:RadCartesianChart.HorizontalAxis>

		<telerik:RadCartesianChart.VerticalAxis>
			<telerik:LinearAxis/>
		</telerik:RadCartesianChart.VerticalAxis>

		<telerik:RadCartesianChart.Series>
			<telerik:BarSeries>
				<telerik:BarSeries.DataPoints>
					<telerik:CategoricalDataPoint Category="Soda" Value="20"/>
					<telerik:CategoricalDataPoint Category="Beer" Value="40"/>
					<telerik:CategoricalDataPoint Category="Milk" Value="35"/>
					<telerik:CategoricalDataPoint Category="Water" Value="40"/>
				</telerik:BarSeries.DataPoints>
			</telerik:BarSeries>
		</telerik:RadCartesianChart.Series>
	</telerik:RadCartesianChart>

Figure 1: Result from Example 1

If a data point category is not defined, the series will set a category automatically. The category will be a numeric value determined by the position of the data point in the data source. For example, "1", "2", "3",etc."

Example 2: Chart with no category defined for datapoints

XAML

	<telerik:RadCartesianChart x:Name="chart">
	   <telerik:RadCartesianChart.HorizontalAxis>
	      <telerik:CategoricalAxis/>
	   </telerik:RadCartesianChart.HorizontalAxis>

	   <telerik:RadCartesianChart.VerticalAxis>
	      <telerik:LinearAxis/>
	   </telerik:RadCartesianChart.VerticalAxis>
	
	   <telerik:RadCartesianChart.Series>
	      <telerik:LineSeries Stroke="Orange"
	                        StrokeThickness="2">
	      <telerik:LineSeries.DataPoints>
	         <telerik:CategoricalDataPoint Value="20"/>
	         <telerik:CategoricalDataPoint Value="40"/>
	         <telerik:CategoricalDataPoint Value="35"/>
	         <telerik:CategoricalDataPoint Value="40"/>
	         <telerik:CategoricalDataPoint Value="30"/>
	         <telerik:CategoricalDataPoint Value="50"/>
	      </telerik:LineSeries.DataPoints>
	   </telerik:LineSeries>
	</telerik:RadCartesianChart.Series>

Figure 2: Result from Example 2

You can customize the CategoricalAxis by utilizing its LabelTemplate property. Here is a simple implementation of a rectangle added in the LabelTemplate.

Example 3: CategoricalAxis with LabelTemplate

XAML

	<Grid>
        <Grid.Resources>
            <DataTemplate x:Key="LabelTemplate" DataType="{x:Type telerik:CategoricalAxis}">
                <StackPanel Orientation="Horizontal">
                    <Rectangle Fill="Red" Width="5" Height="5" />
                    <TextBlock Text="{Binding}" Margin="5 0 0 0" />
                </StackPanel>
            </DataTemplate>
        </Grid.Resources>

        <telerik:RadCartesianChart x:Name="RadChart">
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:CategoricalAxis LabelTemplate="{StaticResource LabelTemplate}" />
            </telerik:RadCartesianChart.HorizontalAxis>

            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis/>
            </telerik:RadCartesianChart.VerticalAxis>

            <telerik:RadCartesianChart.Series>
                <telerik:BarSeries>

                    <telerik:BarSeries.DataPoints>
                        <telerik:CategoricalDataPoint Category="Soda" Value="20"/>
                        <telerik:CategoricalDataPoint Category="Beer" Value="40"/>
                        <telerik:CategoricalDataPoint Category="Milk" Value="35"/>
                        <telerik:CategoricalDataPoint Category="Water" Value="40"/>
                    </telerik:BarSeries.DataPoints>

                </telerik:BarSeries>
            </telerik:RadCartesianChart.Series>
        </telerik:RadCartesianChart>
    </Grid>

Figure 3: Result from Example 3

See Also

• Getting Started
• Axes
• Axis Smart Labels