How to customize the axis labels of WinUI Chart (SfCartesianChart)?

This article explains how to customize the axis labels in WinUI (SfCartesianChart).

By customizing the axis labels in a chart, you can display more meaningful and descriptive text along the axes, thereby enhancing the representation of the chart data. The following steps demonstrate this process.

Method: 1

We can customize the axis labels by utilizing the LabelTemplate property with the help of a Converter, as shown in the following code snippet.

[Xaml]

<chart:SfCartesianChart >
…
      <chart:SfCartesianChart.Resources>
            <local:AxisLabelConverter x:Key="axisLabel" />
            <DataTemplate x:Key="labelTemplate">
                <Border BorderBrush="Gray"
				CornerRadius="5"
				BorderThickness="1">
                    <TextBlock Text="{Binding Converter={StaticResource axisLabel}}"
					   FontSize="13"
					   FontWeight="Medium" 
					   Margin="2"/>
                </Border>
            </DataTemplate>
        </chart:SfCartesianChart.Resources> 
        <chart:SfCartesianChart.XAxes>
            <chart:CategoryAxis LabelTemplate="{StaticResource labelTemplate}"  >
                <chart:CategoryAxis.LabelStyle>
                    <chart:LabelStyle FontSize="15"  />
                </chart:CategoryAxis.LabelStyle>
            </chart:CategoryAxis>
        </chart:SfCartesianChart.XAxes>
...
</chart:SfCartesianChart>

Customize the axis label by using the ChartAxisLabel properties in the AxisLabelConverter, which is inherited from IValueConverter.

    public class AxisLabelConverter : IValueConverter
    {
        ViewModel viewModel = new ViewModel();
        public object Convert(object value, Type targetType, object parameter, string language)
        { 
            ChartAxisLabel chartAxisLabel = value as ChartAxisLabel;
            if (viewModel != null && chartAxisLabel != null)
            {
                Model item = viewModel.Data[(int)chartAxisLabel.Position];
                var label = ((item.Sales - item.Target) / item.Target);
                return chartAxisLabel.Content + " => " + 
                       label.ToString("+#.00 %;-#.00 %;+0.00 %");
            }
            return string.Empty;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }

Method: 2
Additionally, we can modify the axis label by utilizing the LabelCreated event and the properties of ChartAxisLabelEventArgs, as demonstrated in the provided code snippet.

[Xaml]

<chart:SfCartesianChart >
…
        <chart:SfCartesianChart.YAxes>
            <chart:NumericalAxis   LabelCreated="NumericalAxis_LabelCreated" />
        </chart:SfCartesianChart.YAxes>

</chart:SfCartesianChart>

Customize the axis label using the LabelCreated event.

[C#]

   public sealed partial class MainWindow : Window
   {
       public MainWindow()
       {
           this.InitializeComponent();

       }

       private void NumericalAxis_LabelCreated(object sender, ChartAxisLabelEventArgs e)
       { 
           var axis = sender as NumericalAxis;
           if (axis != null)
           {
               var axisValue = double.Parse(e.Label);

               if (axisValue < 250)
               {
                   e.Label = "Very Low";
               }
               else if (axisValue >= 250 && axisValue < 500)
               {
                   e.Label = "Low";
               }
               else if (axisValue >= 500 && axisValue < 750)
               {
                   e.Label = "Average";
               }
               else if (axisValue >= 750 && axisValue < 1000)
               {
                   e.Label = "High";
               }
               else if (axisValue >= 1000)
               {
                   e.Label = "Very High";
               }
           }
       }
   }

Download the complete sample in GitHub.

Output:

Conclusion

I hope you enjoyed learning about how to customize the axis labels of WinUI Chart.

You can refer to our WinUI charts feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day
free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Display-Trac, or feedback portal. We are always happy to assist you!