Rotate X-Axis Label with dynamic SeriesMappings

8 posts, 0 answers
  1. Joachim
    Joachim avatar
    8 posts
    Member since:
    Aug 2011

    Posted 01 Aug 2011 Link to this post

    Hello,

    I want to rotate the X-Axis label with 45 degrees in my chart.
    My chart has a dynamic amount of series which i have used the following code for:

        <telerik:RadChart Height="420" HorizontalAlignment="Left" Margin="10,10,10,10" Name="resultChart" 
                           VerticalAlignment="Top" Width="795" ItemsSource="{Binding ChartData}">
            <telerik:RadChart.SeriesMappings>    
            <telerik:SeriesMapping>
                   <telerik:SeriesMapping.SeriesDefinition>
                    <telerik:StackedBar100SeriesDefinition ShowItemLabels="False" />
                </telerik:SeriesMapping.SeriesDefinition>
                <telerik:SeriesMapping.GroupingSettings>
                    <telerik:GroupingSettings ShouldCreateSeriesForLastGroup="True">
                        <telerik:GroupingSettings.GroupDescriptors>
                            <telerik:ChartGroupDescriptor Member="LegendItem"/>
                        </telerik:GroupingSettings.GroupDescriptors>
                    </telerik:GroupingSettings>
                </telerik:SeriesMapping.GroupingSettings>
                <telerik:SeriesMapping.ItemMappings>
                    <telerik:ItemMapping DataPointMember="XCategory" FieldName="XCategory"/>
                    <telerik:ItemMapping DataPointMember="YValue" FieldName="YValue"/>
                </telerik:SeriesMapping.ItemMappings>
            </telerik:SeriesMapping>
        </telerik:RadChart.SeriesMappings>
    </telerik:RadChart>

    Now I don't know where I should add the rotation LabelRotationAngle property I found in some examples.
  2. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 03 Aug 2011 Link to this post

    Hi Joachim,

    This is a property set on the axis. The code may look something like this:

    chart1.DefaultView.ChartArea.AxisX.LabelRotationAngle = 45;

    You can set it either in code behind, as shown above, or in xaml.
    Let me know how this meets your requirements.

    Greetings,
    Yavor
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>
  3. Joachim
    Joachim avatar
    8 posts
    Member since:
    Aug 2011

    Posted 03 Aug 2011 Link to this post

    Yes, i had found a way to do it that way. But I want to do it all in Xaml since I am using the MVVM pattern.
    As you see in the code I have provided I have no chartarea and I have tried a few things to change it so it does,
    but to no avail. Could you provide an example where my code is adapted so I can change the LabelRotationAngle?
  4. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 03 Aug 2011 Link to this post

    Hi Joachim,

    If you want to add this setting directly in XAML, you would need to include defaltview and chartarea tags. This may look something like this:

    <telerikChart:RadChart x:Name="radChart"
       <telerikChart:RadChart.SeriesMappings>
           <telerikCharting:SeriesMapping>
               <telerikCharting:SeriesMapping.SeriesDefinition>
                   <telerikCharting:SplineSeriesDefinition ShowItemLabels="False" ShowPointMarks="False"/>
               </telerikCharting:SeriesMapping.SeriesDefinition>
               <telerikCharting:SeriesMapping.ItemMappings>
                   <telerikCharting:ItemMapping FieldName="Date" DataPointMember="XValue" />
                   <telerikCharting:ItemMapping FieldName="Value" DataPointMember="YValue" />
               </telerikCharting:SeriesMapping.ItemMappings>
           </telerikCharting:SeriesMapping>
       </telerikChart:RadChart.SeriesMappings>
       <telerikChart:RadChart.DefaultView>
           <telerikCharting:ChartDefaultView>
               ....
               <telerikCharting:ChartDefaultView.ChartArea>
                   <telerikCharting:ChartArea>
                       <telerikCharting:ChartArea.AxisX>
                           <telerikCharting:AxisX AutoRange="True" IsDateTime="True"
                               DefaultLabelFormat="dd-MMM" LabelRotationAngle="45">
                           </telerikCharting:AxisX>
                       </telerikCharting:ChartArea.AxisX>
                   </telerikCharting:ChartArea>
               </telerikCharting:ChartDefaultView.ChartArea>
           </telerikCharting:ChartDefaultView>
       </telerikChart:RadChart.DefaultView>
    </telerikChart:RadChart>

    I hope this helps.

    Best wishes,
    Yavor
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>
  5. Joachim
    Joachim avatar
    8 posts
    Member since:
    Aug 2011

    Posted 03 Aug 2011 Link to this post

    Ok, thanks for the help sofar, i now got the rotating labels working.
    But with this solution I have now the autogenerated legend items don't show anymore.

    <telerik:RadChart Height="420" HorizontalAlignment="Left" Margin="10,10,10,10" Name="resultChart" 
                                   VerticalAlignment="Top" Width="795" ItemsSource="{Binding ChartData}">
                    <telerik:RadChart.SeriesMappings>    
                    <telerik:SeriesMapping>
                           <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:StackedBar100SeriesDefinition ShowItemLabels="False"/>
                        </telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SeriesMapping.GroupingSettings>
                            <telerik:GroupingSettings ShouldCreateSeriesForLastGroup="True">
                                <telerik:GroupingSettings.GroupDescriptors>
                                    <telerik:ChartGroupDescriptor Member="LegendItem"/>
                                </telerik:GroupingSettings.GroupDescriptors>
                            </telerik:GroupingSettings>
                        </telerik:SeriesMapping.GroupingSettings>
                        <telerik:SeriesMapping.ItemMappings>
                            <telerik:ItemMapping DataPointMember="XCategory" FieldName="XCategory"/>
                            <telerik:ItemMapping DataPointMember="YValue" FieldName="YValue"/>
                        </telerik:SeriesMapping.ItemMappings>
                    </telerik:SeriesMapping>
                </telerik:RadChart.SeriesMappings>
      
                <telerik:RadChart.DefaultView>
                    <telerik:ChartDefaultView>
                        <telerik:ChartDefaultView.ChartArea>
                            <telerik:ChartArea EnableAnimations="False">
                                <telerik:ChartArea.AxisX>
                                    <telerik:AxisX LabelRotationAngle="-70" LayoutMode="Inside"/>
                                </telerik:ChartArea.AxisX>
                            </telerik:ChartArea>
                        </telerik:ChartDefaultView.ChartArea>
                    </telerik:ChartDefaultView>
                </telerik:RadChart.DefaultView>
      
            </telerik:RadChart>

    my ItemsSource is  a list of ChartItems:
    public class ChartItem
    {
        public string XCategory { get; set; }
        public double YValue { get; set; }
        public string LegendItem { get; set; }
    }


    The legend is empty now. Before I added the defaultview element it did show. Is there a way to do the auto generated legend with the defaultview?
  6. Joachim
    Joachim avatar
    8 posts
    Member since:
    Aug 2011

    Posted 04 Aug 2011 Link to this post

    OK, I have found the solution myself :) Thanks for all the help.
  7. Morten Post
    Morten Post avatar
    4 posts
    Member since:
    Jul 2009

    Posted 27 Sep 2011 Link to this post

    What was your solution to this problem?
  8. Joachim
    Joachim avatar
    8 posts
    Member since:
    Aug 2011

    Posted 27 Sep 2011 Link to this post

    I had to define the ChartLegend and add it to my ChartArea like this:

    <telerik:RadChart.DefaultView>
        <telerik:ChartDefaultView>
            <telerik:ChartDefaultView.ChartLegend>
                <telerik:ChartLegend x:Name="Legend" UseAutoGeneratedItems="True">
                </telerik:ChartLegend>
            </telerik:ChartDefaultView.ChartLegend>
            <telerik:ChartDefaultView.ChartArea>
                <telerik:ChartArea EnableAnimations="{Binding AnimationEnabled}" LegendName="Legend">
                    <telerik:ChartArea.AxisX>
                        <telerik:AxisX LabelRotationAngle="{Binding Converter={StaticResource axislabelrotationConverter}}" LayoutMode="Inside"/> 
                    </telerik:ChartArea.AxisX>
                </telerik:ChartArea>
            </telerik:ChartDefaultView.ChartArea>
        </telerik:ChartDefaultView>
    </telerik:RadChart.DefaultView>
Back to Top