Horizontal bar chart axis x label positioning

9 posts, 0 answers
  1. Joby
    Joby avatar
    1 posts
    Member since:
    Nov 2012

    Posted 21 Nov 2012 Link to this post

    Hi,

    I have created a horizontal stacked bar chart by geting the values from database. some of the labels are long and some are short
    The default label horizontal position is centre how can I change it to right aligned one?

    I have attached the screen shot of my chart. also I want to set a fixed width for that x axis label. Is this possible ? Please help...
  2. Missing user
    Missing user avatar

    Posted 26 Nov 2012 Link to this post

    Hello Joby,

    To change the axis' label positioning, you need to apply a style that targets a TextBlock to the ItemLabelStyle of the RadChart's AxisY as follows:
    <telerik:AxisY>
        <telerik:AxisY.AxisStyles>
            <telerik:AxisStyles>
                <telerik:AxisStyles.ItemLabelStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Right"/>
                    </Style>
                </telerik:AxisStyles.ItemLabelStyle>
            </telerik:AxisStyles>
        </telerik:AxisY.AxisStyles>
    </telerik:AxisY>

    Likewise, you can set the AxisX labels to a fixed width by applying a similar style, but  with a different Setter:
    <telerik:AxisX>
        <telerik:AxisX.AxisStyles>
            <telerik:AxisStyles>
                <telerik:AxisStyles.ItemLabelStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="Width" Value="20"/>
                    </Style>
                </telerik:AxisStyles.ItemLabelStyle>
            </telerik:AxisStyles>
        </telerik:AxisX.AxisStyles>
    </telerik:AxisX>

    If you want to customize the Axes even further, you can take a look at this help topic.

    All the best,
    Ivan N.
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Alex
    Alex avatar
    5 posts
    Member since:
    Jul 2012

    Posted 05 Dec 2012 Link to this post

    Hi,
    I have a similar problem, but i need to align labels on the horizontal axis to the left. They are aligned to center and overlap if the label text is too long. I tried to set the HorizontalAlignment in ItemLabelStyle for the horizontal axis but it doesn't work, although it works fine for the vertical axis.
    Is it possible to left-align labels on the horizontal axis?
    Please see the attached screenshot.
  5. Missing user
    Missing user avatar

    Posted 07 Dec 2012 Link to this post

    Hello Alex,

    Please, find attached a sample project that shows how to achieve the desired result.

    Kind regards,
    Ivan N.
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Alex
    Alex avatar
    5 posts
    Member since:
    Jul 2012

    Posted 10 Dec 2012 Link to this post

    I tried to run the example but the horizontal labels are not rotated. LabelRotationAngle doesn't seem to work. Is there any setting or assembly that i should reference in order to enable label rotation?
    Please check the new screenshot.
  7. Missing user
    Missing user avatar

    Posted 12 Dec 2012 Link to this post

    Hi Alex,

    Labels are rotated appropriately at our end. Take a look at the sample project attached to this message which includes assemblies from the trial version of RadControls for Silverlight.

    I've also attached two screenshots which show how the chart should be rendered.

    Regards,
    Ivan N.
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  8. Alex
    Alex avatar
    5 posts
    Member since:
    Jul 2012

    Posted 13 Dec 2012 Link to this post

    Thank you, that's exactly what i needed.
  9. Savani
    Savani avatar
    1 posts
    Member since:
    Feb 2013

    Posted 05 Feb 2013 Link to this post

    Hi,

    I'm also facing the same issue. and i need to display the X axis labels exactly same as in the image you have attached.
    But, unfortunately i was unable to open the source code attached and therefore could you please help me with the setting that i need to do to achieve this.

  10. Missing user
    Missing user avatar

    Posted 07 Feb 2013 Link to this post

    Hello Savani,

    I've reattached only the .xaml file and its code-behind .cs file that contain the actual workaround. You should be able to change the appearance of the labels based solely on these two files.

    Would you please also explain what exactly prevented you from opening the attached archive so that we may eliminate the problem if there's something wrong on our end?

    Kind regards,
    Ivan N.
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner