Version

Configuring Axis Label Templates

In the XamDataChart™ control, you can change the appearance of the axis label by providing a custom DataTemplate and binding it to the Axis object’s Label property.

The following sample code shows how to use a custom DataTemplate for CategoryXAxis and NumericYAxis in the XamDataChart™ control.

In XAML:

<ig:XamDataChart x:Name="xmDataChart">
    <ig:XamDataChart.Axes>
        <ig:CategoryXAxis x:Name="xmDateXAxis"
                          ItemsSource="{Binding}">
            <ig:CategoryXAxis.LabelSettings>
                <ig:AxisLabelSettings Location="OutsideBottom"
                                      Visibility="Visible" />
            </ig:CategoryXAxis.LabelSettings>
            <ig:CategoryXAxis.Label>
                <DataTemplate>
                    <Border Margin="5"
                            Background="#FF00B3F1"
                            RenderTransformOrigin="0,0">
                        <Border.RenderTransform>
                            <TransformGroup>
                                <RotateTransform Angle="20" />
                                <TranslateTransform  X="30"/>
                            </TransformGroup>
                        </Border.RenderTransform>
                        <TextBlock Foreground="White"
                                   Margin="2"
                                   Padding="1"
                                   Width="68"
                                   FontSize="14.667"
                                   Text="{Binding Item.Date}"
                                   VerticalAlignment="Center"
                                   HorizontalAlignment="Center">
                        </TextBlock>
                    </Border>
                </DataTemplate>
            </ig:CategoryXAxis.Label>
        </ig:CategoryXAxis>
        <ig:NumericYAxis x:Name="xmPriceYAxis">
            <ig:NumericYAxis.LabelSettings>
                <ig:AxisLabelSettings Location="OutsideLeft"
                                      Extent="80"
                                      Visibility="Visible" />
            </ig:NumericYAxis.LabelSettings>
            <ig:NumericYAxis.Label>
                <DataTemplate>
                    <Border Margin="5"
                            HorizontalAlignment="Right"
                            Background="#FF484848">
                            <Border.RenderTransform>
                                <TransformGroup>
                                    <RotateTransform Angle="0" />
                                </TransformGroup>
                            </Border.RenderTransform>
                            <TextBlock Foreground="White"
                                       Margin="2"
                                       Padding="1"
                                       Width="50"
                                       Text="{Binding Item}"
                                       FontSize="14.667"
                                       VerticalAlignment="Center"
                                       HorizontalAlignment="Center">
                            </TextBlock>
                        </Border>
                    </DataTemplate>
                </ig:NumericYAxis.Label>
            </ig:NumericYAxis>
        </ig:XamDataChart.Axes>
</ig:XamDataChart>

The following images show how the XamDataChart control might look like with a custom DataTemplate for CategoryXAxis and NumericYAxis.

xamWebDataChart Axes Axis Label Templates 01.png

Related Content: