kb-chartview-axis-label-number-suffix.md

title	page_title	description	type	slug	position	tags	ticketid	res_type	category
Display Number Suffix in Axis Labels	Show Letter Ending for the Numbers in Axis Labels	How to convert the label values on the axis from standard numbers to shorthands with letters at the end (like K for thousands).	how-to	kb-chartview-axis-label-number-suffix	0	axis,label,template,suffix,thousand,human,readable	1580349	kb	knowledge-base

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.

[C#]

{{region kb-chartview-axis-label-number-suffix-0}} 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();
    }
}

{{endregion}}

[XAML]

{{region kb-chartview-axis-label-number-suffix-1}} <Window.Resources> <local:ShorthandNumberConverter x:Key="ShorthandNumberConverter"/> </Window.Resources> {{endregion}}

[XAML]

{{region kb-chartview-axis-label-number-suffix-2}} telerik:RadCartesianChart.VerticalAxis <telerik:LinearAxis LabelTemplate="{StaticResource CustomAxisLabelTemplate}"/> </telerik:RadCartesianChart.VerticalAxis> {{endregion}}