We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

CategoryAxis Label rotation and alignment

Thread ID:

Created:

Updated:

Platform:

Replies:

119374 Jun 11,2015 03:07 PM UTC Jun 15,2015 06:39 AM UTC WPF 3
loading
Tags: Chart
Fkwitond
Asked On June 11, 2015 03:07 PM UTC

Hi,

We tried to display a column chart with WPF sfchart object. We want to present the axis label text with an angle -60 degree. We have an issue when we display a long text because the text is moving to the right (I attached a chart’s picture).  We would like to have the end of the text at the tick line position (see the second picture). Do you have any property which can set the axis rotation text?

Regards,



Attachment: pictures_e107738e.zip

Suresh S [Syncfusion]
Replied On June 12, 2015 09:48 AM UTC

Hi Witond,

Thanks for contacting Syncfusion support.

By default, we will be rotating the axis labels with center of the  label and it is the default behavior.   In order to customize the position we can set LabelTemplate property of CharAxis and set margin for the labels accordingly as shown in below code snippet,

Code Snippet:

<chart:SfChart.PrimaryAxis>

                <chart:CategoryAxis  LabelRotationAngle="-60" LabelTemplate="{StaticResource transform}"/>

</chart:SfChart.PrimaryAxis>

 

Resource Template:

<DataTemplate x:Key="transform">

                <TextBlock Margin="0,0,0,60" Text="{Binding LabelContent}"/>

</DataTemplate>

 

Please let us know in case of any query.

Regards,

Suresh S


Fkwitond
Replied On June 12, 2015 03:20 PM UTC

Hi Witond,

Thanks for contacting Syncfusion support.

By default, we will be rotating the axis labels with center of the  label and it is the default behavior.   In order to customize the position we can set LabelTemplate property of CharAxis and set margin for the labels accordingly as shown in below code snippet,

Code Snippet:

<chart:SfChart.PrimaryAxis>

                <chart:CategoryAxis  LabelRotationAngle="-60" LabelTemplate="{StaticResource transform}"/>

</chart:SfChart.PrimaryAxis>

 

Resource Template:

<DataTemplate x:Key="transform">

                <TextBlock Margin="0,0,0,60" Text="{Binding LabelContent}"/>

</DataTemplate>

 

Please let us know in case of any query.

Regards,

Suresh S


Thank you for your help.

To fix this issue when the text is too long, I used a converter to calculate the best Margin value depending on the length of the label

<DataTemplate>
    <TextBlock Text="{Binding LabelContent}" FontSize="10" Margin="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth, Converter={StaticResource LabelContentMarginConverter}}"/>
</DataTemplate>

public class LabelContentMarginConverter : IValueConverter
{
    public object Convert(object valueType targetTypeobject parameterCultureInfo culture)
    {
        var rightValue = System.Convert.ToDouble(value/ (-3);
        var bottomValue = System.Convert.ToDouble(value/ 2;
 
        return new Thickness(00rightValuebottomValue);
    }
 
    public object ConvertBack(object valueType targetTypeobject parameterCultureInfo culture)
    {
         return null;
    }
}

Suresh S [Syncfusion]
Replied On June 15, 2015 06:39 AM UTC

Hi Fkwitond,
Thanks for the update.
We are glad to know the issue is resolved.
Please let us know in case of any query.
Regards,
Suresh S

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;