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?

enter image description here

The label content is basically in the following format `XX.XX - XX.XX` where `X` is a digit (it is a range). The ranges are calculated using some `C#` code. — gotqn, Jun 04 '15 at 10:59
Is there a property like ColumTemplate that would allow complete customization though? (I couldn't find any docs) — WiredPrairie, Jun 04 '15 at 11:10
@WiredPrairie Same here, I have find a few years old example which was not working. There is no any up-to-date documentation. — gotqn, Jun 04 '15 at 11:21

score 3 · Accepted Answer · answered Jun 04 '15 at 12:45

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.

Rotation not right

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).

You could also use the [`LayoutTransformControl`](http://winrtxamltoolkit.codeplex.com/SourceControl/latest#WinRTXamlToolkit/WinRTXamlToolkit.Shared/Controls/LayoutTransformControl/LayoutTransformControl.cs) from the toolkit to do layout transform on the labels. — Filip Skakun, Jun 05 '15 at 02:48

How to rotate labels of WinRTXamlToolkit column chart?

1 Answers1