How to rotate labels of WinRTXamlToolkit column chart?

Question

I have the following XAML definition:

<Charting:Chart x:Name="ColumnChart"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Width="Auto"
                Height="Auto"
                Padding="50"
                Title="100 random numbers">
    <Charting:ColumnSeries Title="Skills"
                           IndependentValuePath="Name"
                           DependentValuePath="Pts"
                           IsSelectionEnabled="True">

    </Charting:ColumnSeries>
</Charting:Chart>

How can I rotate the labels (let's say on -90 degrees) in order to make them more readable?

Answer 1

Rotating the labels is possible. It requires a few steps, and unfortunately, due to a missing feature in WinRT XAML layout, a custom class potentially.

The core idea is found here.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Charting:Chart x:Name="ColumnChart"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            Padding="50"
            Title="100 random numbers">
        <Charting:ColumnSeries Title="Skills" x:Name="theColumnSeries"
                       IndependentValuePath="Name"
                       DependentValuePath="Pts"
                       IsSelectionEnabled="True">
            <Charting:ColumnSeries.IndependentAxis>
                <Charting:CategoryAxis Orientation="X">
                    <Charting:CategoryAxis.AxisLabelStyle>
                        <Style TargetType="Charting:AxisLabel">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="Charting:AxisLabel">
                                        <TextBlock Text="{TemplateBinding FormattedContent}">
                                            <TextBlock.lay
                                            <TextBlock.RenderTransform>
                                                <RotateTransform Angle="-60" />
                                            </TextBlock.RenderTransform>
                                        </TextBlock>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Charting:CategoryAxis.AxisLabelStyle>
                </Charting:CategoryAxis>
            </Charting:ColumnSeries.IndependentAxis>
        </Charting:ColumnSeries>
    </Charting:Chart>
</Grid>

The C# code I used:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();

        this.Loaded += MainPage_Loaded;
    }

    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        var rnd = new Random(444);
        ObservableCollection<Demo> values = new ObservableCollection<Demo>();
        for (int i = 0; i < 15; i++)
        {
            values.Add(new Demo() { Name = (rnd.NextDouble() * 100).ToString(), Pts = i });
        }


        ((ColumnSeries)ColumnChart.Series[0]).ItemsSource = values;
    }
}

class Demo
{
    public string Name { get; set; }
    public double Pts { get; set; }
}

But, unfortunately, it's not exactly what you'll want. The problem is that there isn't a LayoutTransform like exists in WPF. If you run the code as is shown above, the labels are rotated, but they will overlap other content.

The author of the blog has written a LayoutTransformer class that may help solve the problem, although it was designed for Silverlight (so it may be portable and work with WinRT XAML).