Rotate X-Axis Label with dynamic SeriesMappings

[Joachim]

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.

[Yavor]

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

[Joachim]

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?

[Yavor]

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

[Joachim]

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?

[Joachim]

OK, I have found the solution myself :) Thanks for all the help.

[Morten Post]

What was your solution to this problem?

[Joachim]

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>