X Axis Label Rotation

2 posts, 0 answers
  1. Duncan
    Duncan avatar
    6 posts
    Member since:
    Sep 2011

    Posted 24 Oct 2011 Link to this post

    UPDATE: I found a slight issue with the original method and have adjusted it to a fixed and simpler version.

    I've managed to work out a workaround for the axis label rotation issue where the labels rotate around their centres, which has been raised in a few threads but never solved. This allows you to rotate the labels by one of their ends, allowing you to have them at 45 degrees or whatever. Hopefully this will save some other people some pain...

    I was trying to set the angle to -45 degrees, but this same method can be used for any non 0/90/-90 angle. You may need to adjust the steps slightly.

    1. Set the chart axis's label rotation to -90. This makes the layout have enough space to put the labels

    2. Restyle the label TextBlocks. As specified in the docs, the style needs to be set programmatically. You want to change the rotation centre and set the rotation angle to (in this case) 45 degrees (so I've got -90 + 45 = -45, as desired), plus the text alignment.

    Important bits:
    <Setter Property="RenderTransformOrigin"
            Value="1,0.5" />
    <Setter Property="RenderTransform"> <Setter.Value> <CompositeTransform Rotation="45" /> </Setter.Value> </Setter>
    <Setter Property="TextAlignment"
            Value="Right" />

    You'll get the label in the right spot and angled correctly, but it'll be clipped.

    3. Get the LayoutTransformControl style and modify it. You want to set the Grid's UseLayoutRounding to True.

    <Grid x:Name="RootVisual"
         Background="{TemplateBinding Background}"
         UseLayoutRounding="True">
         <ContentPresenter x:Name="ContentPresenter"
              ContentTemplate="{TemplateBinding ContentTemplate}"
              Content="{TemplateBinding Content}" />
    </Grid>

    4. Grab this style and chuck it into your ChartArea as an implicit style.

    <telerik:ChartArea.Resources>
            <Style TargetType="telerik:LayoutTransformControl"
                   BasedOn="{StaticResource LayoutTransformControlStyle}" />
    </telerik:ChartArea.Resources>

    And, if you're really lucky, that will work. :-)

    They key thing seems to be setting the UseLayoutRounding. I don't know why the control defaults to False in the first place, and I have even less idea as to why it would fix the clipping issue. But hey, it works.
  2. Sia
    Admin
    Sia avatar
    756 posts

    Posted 26 Oct 2011 Link to this post

    Hi Duncan,

    This seems to be an interesting solution. We will review it carefully and will contact you again after that.

    Greetings,
    Sia
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top