Special Axis Text Formatting

[Nico]

Hello!
How can I format the Axis texts of the Chart like it is shown in the image below?

So for the horizontal axis and vertical axis there should be only numbers, but we want to place a text at the bottom left corner.

[Lance | Senior Manager Technical Support]

Hello Nico,

That area you are calling out is not where the title of any axis will get rendered. Therefore, to get the result you want, you can just add a Label at the bottom left corner of the same parent container you put the chart into.

For example:

<Grid>
    <!-- Telerik Chart Goes Here, oriented to fill the parent Grid -->
    <telerikChart:RadCartesianChart HorizontalOptions="Fill" VerticalOptions="Fill" ...>

    <!-- Label Goes Here, oriented to bottom-left of the parent Grid-->
    <Label Text="kWh" HorizontalOptions="Start" VerticalOptions="End"/>
</Grid>

Regards,
Lance | Manager Technical Support
Progress Telerik

[Nico]

Unfortunately, this is not working as expected because the formatting is very bad.

The solution seems quite simple, I just have to override the LabelFormatter of the vertical axis like this:

public class FirstValueOverrideLabelFormatter : ILabelFormatter
{
        private string overrideValue;
        private string lookupValue;

        public FirstValueOverrideLabelFormatter(string overrideValue, string lookupValue)
        {
            this.overrideValue = overrideValue;
            this.lookupValue = lookupValue;
        }

        public Type ValueType => typeof(double?);

        public object ConvertionContext => new object();

        public string FormatValue(object value)
        {
            var result = value.ToString();

            if (result == lookupValue)
            {
                return overrideValue;
            }

            return value.ToString();
        }
}

[Lance | Senior Manager Technical Support]

Hi Nico,

Yes, you can always replace any of the existing values in an axis using the Label Formatter. As long as you're okay with replacing that first value in the axis with a custom lookup, this is a good approach that won't add too much overhead to your rendering pass.

As to your comment about the formatting of the Label, that's because you probably didn't set the Label's Font family or size. There is some additional work if you want it to perfectly match.