Template Axis item label

[Cedric]

Hi,
 is it possible to template the XAxis item label displayed to replace them by an icon ?

I have found 

<telerik:ChartArea.AxisX>
  <telerik:AxisX x:Uid="telerik:AxisX_1">
    <telerik:AxisX.AxisStyles>
      <telerik:AxisStyles ItemLabelStyle="{StaticResource StrategyMinItemLabelStyle}" />
    </telerik:AxisX.AxisStyles>
  </telerik:AxisX>
</telerik:ChartArea.AxisX>

But what is the targettype of my   StrategyMinItemLabelStyle  style ?
I want to display an icon in place of text .

- Cedric -

[Sia]

Hi Cedric,

The target type of your custom item label style should be TextBlock. Below you can find the default template of all axes' labels. So if you need to have them replaced with image, you need to set custom template and apply it to the labels you need to have customized:

<telerikCharting:LabelFormatConverter x:Key="labelFormatConverter" />
<Style x:Key="CustomLabel"
    TargetType="telerikCharting:AxisLabel2D">
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="Background" Value="Red" />
    <Setter Property="ItemLabelStyle">
        <Setter.Value>
            <Style TargetType="TextBlock">
                <Setter Property="TextAlignment" Value="Center" />
                <Setter Property="Padding" Value="1" />
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerikCharting:AxisLabel2D">
                <Border Background="{TemplateBinding Background}">
                    <TextBlock Style="{TemplateBinding ItemLabelStyle}"
                                Text="{Binding Converter={StaticResource labelFormatConverter}}">
                        <TextBlock.LayoutTransform>
                            <RotateTransform x:Name="PART_RotateTransform" />
                        </TextBlock.LayoutTransform>
                    </TextBlock>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I have modified the template with additional border with red background and have it applied to all labels on the X axis:

private void ChartArea_Loaded(object sender, RoutedEventArgs e)
{
    ChartArea area = sender as ChartArea;
    HorizontalAxisLabels2D axisLabelsContainer = area.FindChildByType<HorizontalAxisLabels2D>();
    var axisLabels = axisLabelsContainer.ChildrenOfType<AxisLabel2D>();
    System.Windows.Style style = this.Resources["CustomLabel"] as System.Windows.Style;

    foreach(var item in axisLabels)
    {
        item.Style = style;
    }
}

I hope this helps.


All the best,
Sia
the Telerik team

[Cedric]

What is the type of value source of the labelFormatconverter ? The documentation is not usefull : "Formats the value for a chart label".

In my case the values displayed are coming from this class in my view model:

public class Score 

{

    public string Library { get; set; }
        public ClassificationTechnoType Techno { get; set; }
        public int Number { get; set; } 

}

And the SerieDefinition is:

<telerik:SeriesMapping LegendLabel="SUCCESS" CollectionIndex="0">
                            <telerik:SeriesMapping.SeriesDefinition>
                                <telerik:StackedBarSeriesDefinition ShowItemLabels="False" />
                            </telerik:SeriesMapping.SeriesDefinition>

                            <telerik:SeriesMapping.ItemMappings>
                                <telerik:ItemMapping DataPointMember="YValue"
                                                     FieldName="Number" />
                                <telerik:ItemMapping DataPointMember="XCategory"
                                                     FieldName="Library" />
                            </telerik:SeriesMapping.ItemMappings>
                        </telerik:SeriesMapping>

The aim is to replace the text displayed (currently Library) by one of 4 icons corresponding to the values of my classificationTechnoType enumeration.
I am missing the link between the TickPoint and my Score class to get the right Techno property in my trigger....

- Cedric -

[Sia]

Hi Cedric,

My idea was to remove the TextBlock and to add image and bind its Source property to a property in your view model. Something similar as the shown approach in this example but for the axis labels.

Regards,
Sia
the Telerik team