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.

MainWindow.xaml

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>