How to use a converter for CategoricalAxis?

[Mark]

I am creating a RadCartesianChart which has a category of country name codes which I need to convert to a RegionInfo.DisplayName using a converter. I cannot figure out how to use a converter with CategoricalAxis?

 

                        <telerikChart:RadCartesianChart x:Name="Chart">
                            <telerikChart:RadCartesianChart.HorizontalAxis>
                                <telerikChart:NumericalAxis Location="Top"/>
                            </telerikChart:RadCartesianChart.HorizontalAxis>
                            <telerikChart:RadCartesianChart.VerticalAxis>
                                <telerikChart:CategoricalAxis PlotMode="OnTicks">
                                    <telerikChart:CategoricalAxis>
                                        <DataTemplate>
                                            <Label Text="{Binding Converter={StaticResource countryNameConverter}" />
                                        </DataTemplate>
                                    </telerikChart:CategoricalAxis>
                                </telerikChart:CategoricalAxis>
                            </telerikChart:RadCartesianChart.VerticalAxis>
                            <telerikChart:RadCartesianChart.Series>
                                <telerikChart:SplineAreaSeries ItemsSource="{Binding Data}">
                                    <telerikChart:SplineAreaSeries.ValueBinding>
                                        <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
                                    </telerikChart:SplineAreaSeries.ValueBinding>
                                    <telerikChart:SplineAreaSeries.CategoryBinding>
                                        <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
                                    </telerikChart:SplineAreaSeries.CategoryBinding>
                                </telerikChart:SplineAreaSeries>
                            </telerikChart:RadCartesianChart.Series>
                        </telerikChart:RadCartesianChart>

[Rosy Topchiyska]

Hello Mark,

Thank you for contacting us.

The chart axis supports LabelFormat and LabelFormatter properties. You can read more about them in our documentation. You can use them like this:

LabelFormat: 

<telerikChart:RadCartesianChart.HorizontalAxis>
  <telerikChart:CategoricalAxis LabelFormat="{}{0} category" />
</telerikChart:RadCartesianChart.HorizontalAxis>

Note that there are some differences in the format string for the different axes types.

LabelFormatter:

You need to provide a label  class:

public class CustomLabelFormatter : LabelFormatterBase<string>
{
    public override string FormatTypedValue(string value)
    {
        return string.Format("{0} category", value);
    }
}

And set it to the axis LabelFormatter property:

<telerikChart:RadCartesianChart.HorizontalAxis>
  <telerikChart:CategoricalAxis>
    <local:CustomLabelFormatter />
  </telerikChart:CategoricalAxis>
</telerikChart:RadCartesianChart.HorizontalAxis>

Please, note that currently there is an issue with the BindingContext of the axis and binding is not supported. You can follow the status of the issue in our feedback portal.

Please, let us know if you have further questions.

Regards,
Rosy Topchiyska
Telerik by Progress

[Mark]

Ok, thanks, that makes sense. I've set LabelFormatter as you suggested but the CustomLabelFormatter class is not being fired. Do I understand you correctly, that this is because there is an issue with the BindingContext?

[Rosy Topchiyska]

Hi Mark,

I have attached an example of how to use the LabelFormatter. There are two options:

1. You can directly set the LabelFormatter to an instance of the formatter class - the categorical axis in the sample.
2. will not work because the BindingContext of the Axis is not correct. There is a workaround that you can use until we fix the issue. You can explicitly set the binding context of the axis to be the context of the chart - the numerical axis in the sample.

Please, take a look at the attached app and let us know if you have further questions.
 
Regards,

Rosy Topchiyska
Telerik by Progress

[Mark]

Very nice! Thank you very much for the example app and workaround! That worked like a charm!