This is a migrated thread and some comments may be shown as answers.

Rotate X-Axis Label with dynamic SeriesMappings

7 Answers 143 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Joachim
Top achievements
Rank 1
Joachim asked on 01 Aug 2011, 12:50 PM
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.

7 Answers, 1 is accepted

Sort by
0
Yavor
Telerik team
answered on 03 Aug 2011, 07:55 AM
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 >>
0
Joachim
Top achievements
Rank 1
answered on 03 Aug 2011, 08:23 AM
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?
0
Yavor
Telerik team
answered on 03 Aug 2011, 09:05 AM
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 >>
0
Joachim
Top achievements
Rank 1
answered on 03 Aug 2011, 09:30 AM
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?
0
Joachim
Top achievements
Rank 1
answered on 04 Aug 2011, 12:36 PM
OK, I have found the solution myself :) Thanks for all the help.
0
Morten Post
Top achievements
Rank 1
answered on 27 Sep 2011, 12:43 PM
What was your solution to this problem?
0
Joachim
Top achievements
Rank 1
answered on 27 Sep 2011, 12:48 PM
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>
Tags
Chart
Asked by
Joachim
Top achievements
Rank 1
Answers by
Yavor
Telerik team
Joachim
Top achievements
Rank 1
Morten Post
Top achievements
Rank 1
Share this question
or