Display Number Suffix in Axis Labels

Environment

Product Version	2022.2.621
Product	ChartView for WPF

Description

How to display shorthand number values in the axis labels. For example, instead of 1000 to display 1K or instead of 1000000 to show 1M.

Solution

To achieve this effect, use the LabelTemplate property of the chart axis. This will allow you to implement an IValueConverter and use it in the template, to convert from the standard numeric value to the shorthand variation.

public class ShorthandNumberConverter : IValueConverter 
{ 
    private const double OneTrillion = 1000000000000; 
    private const double OneBillion = 1000000000; 
    private const double OneMillion = 1000000; 
    private const double OneThousand = 1000; 
 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
        var originalValue = double.Parse((string)value); 
        if (originalValue < OneThousand || originalValue >= OneTrillion) 
        { 
            return originalValue; 
        } 
        if (originalValue >= OneBillion) 
        { 
            return (originalValue / OneBillion).ToString("0.#") + "B"; 
        } 
        else if (originalValue >= OneMillion) 
        { 
            return (originalValue / OneMillion).ToString("0.#") + "M"; 
        } 
        else if (originalValue >= OneThousand) 
        { 
            return (originalValue / OneThousand).ToString("0.#") + "K"; 
        } 
        return originalValue; 
    } 
 
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
        throw new NotImplementedException(); 
    } 
} 

<Window.Resources> 
    <local:ShorthandNumberConverter x:Key="ShorthandNumberConverter"/> 
    <DataTemplate x:Key="CustomAxisLabelTemplate"> 
        <TextBlock Text="{Binding Converter={StaticResource ShorthandNumberConverter}}" /> 
    </DataTemplate> 
</Window.Resources> 

<telerik:RadCartesianChart.VerticalAxis> 
    <telerik:LinearAxis LabelTemplate="{StaticResource CustomAxisLabelTemplate}"/> 
</telerik:RadCartesianChart.VerticalAxis>