How to: Create and Customize Custom Axis Labels

• Jun 07, 2019

This example demonstrates how custom axis labels are created and customized in the Chart control.

To add a custom axis label on the chart, create a CustomAxisLabel object and add it to the CustomAxisLabelCollection returned by the Axis2D.CustomLabels property.

To show the custom label on the X-axis or Y-axis, specify an axis value that corresponds to the label position on an axis (using the CustomAxisLabel.Value property) and to its content (via the CustomAxisLabel.Content property).

You can customize custom label appearance using the Foreground, FontFamily, FontWeight, and FontStyle properties for the AxisLabel object.

For more information about custom axis labels, see the Axis Labels topic.

View Example

MainWindow.xaml

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        x:Class="CustomAxisLabel.MainWindow"
        Title="Custom Axis Label" Height="350" Width="525">
    <Grid>
        <dxc:ChartControl>
            <dxc:ChartControl.Titles>
                <dxc:Title Content="Population Level by Country" HorizontalAlignment="Center"/>
            </dxc:ChartControl.Titles>
            <dxc:XYDiagram2D>
                <dxc:XYDiagram2D.AxisX>
                    <dxc:AxisX2D>
                        <dxc:AxisX2D.Label>
                            <dxc:AxisLabel FontSize="14" Foreground="#FF0E5ED6" FontWeight="Bold"/>
                        </dxc:AxisX2D.Label>
                        <dxc:AxisX2D.CustomLabels>
                            <dxc:CustomAxisLabel  Value="1" Content="Brazil"/>
                            <dxc:CustomAxisLabel  Value="2" Content="Indonesia"/>
                            <dxc:CustomAxisLabel  Value="3" Content="USA"/>
                            <dxc:CustomAxisLabel  Value="4" Content="India"/>
                            <dxc:CustomAxisLabel  Value="5" Content="China"/>
                        </dxc:AxisX2D.CustomLabels>
                    </dxc:AxisX2D>
                </dxc:XYDiagram2D.AxisX>
                <dxc:XYDiagram2D.AxisY>
                    <dxc:AxisY2D>
                        <dxc:AxisY2D.Label>
                            <dxc:AxisLabel FontFamily="Verdana" FontStyle="Italic" Foreground="#FF9E5D2F"/>
                        </dxc:AxisY2D.Label>
                        <dxc:AxisY2D.CustomLabels>
                            <dxc:CustomAxisLabel Content="Low" Value="3"/>
                            <dxc:CustomAxisLabel Content="Middle" Value="6"/>
                            <dxc:CustomAxisLabel Content="High" Value="16"/>
                        </dxc:AxisY2D.CustomLabels>
                    </dxc:AxisY2D>
                </dxc:XYDiagram2D.AxisY>
                <dxc:BarSideBySideSeries2D>
                    <dxc:SeriesPoint Argument="1" Value="2"/>
                    <dxc:SeriesPoint Argument="2" Value="3"/>
                    <dxc:SeriesPoint Argument="3" Value="5"/>
                    <dxc:SeriesPoint Argument="4" Value="17"/>
                    <dxc:SeriesPoint Argument="5" Value="20"/>
                </dxc:BarSideBySideSeries2D>
            </dxc:XYDiagram2D>
        </dxc:ChartControl>
    </Grid>
</Window>