Search code examples
c#.netsilverlightchartssilverlight-toolkit

Toolkit chart rotate labels X-axis


First of all thank you for reading this.

I have the following problem:
I want the labels of my X-axis te be turned 90 degrees. So that the text is facing vertical instead of horizontal. My X-axis is generated automatic, but it doesn't have to be. So that the content of the label is vertical instead of horizontal. I've tried multiple options to achieve this but none of them worked for me yet. So I really hope anybody has a clue on how to get this working. With the options I tried there was just another axis that showed up with numbers only. While the thing what I want is the labels to be turned so that all of the text fits on the axis without overlapping eachother.

The image below is the way it is right now: How it is right now.

And here is an example of how i would like it to be (this is made in excel): The way i would like it to be.

I have looked around at more sites but i cant find one that is working for me.
Both in xaml or in the code behind are fine for me.
This is the code i am using now:

<toolkit:Chart Margin="8,72,0,8" Title="Aantal meldingen per afdeling" x:Name="chartMeldingenPerAfdeling">
        <toolkit:Chart.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="White" Offset="0"/>
                <GradientStop Color="#FF476D88" Offset="1"/>
            </LinearGradientBrush>
        </toolkit:Chart.Background>
        <toolkit:ColumnSeries ItemsSource="{Binding}" DependentValuePath="AantalMeldingen"
                               IndependentValuePath="Afdeling" Margin="0,0,0,1" 
                           Title="Aantal meldingen" Padding="0" VerticalContentAlignment="Center" 
                           HorizontalContentAlignment="Center" FontSize="8"/>
        <toolkit:LineSeries ItemsSource="{Binding}" DependentValueBinding="{Binding Percentage}" DependentRangeAxis="{Binding ElementName=PercentageAxis}"
                            IndependentValueBinding="{Binding Afdeling}" IndependentAxis="{Binding ElementName=lin}" Title="Pareto"/>
        <toolkit:Chart.Axes>
            <toolkit:LinearAxis Orientation="Y" Location="Left" Title="Aantal" x:Name="AantalAxis"/>
            <toolkit:LinearAxis Orientation="Y" Location="Right" Title="Percentage" x:Name="PercentageAxis" Minimum="0" Maximum="100"/>
        </toolkit:Chart.Axes>
    </toolkit:Chart>

Thank you in advance.


Solution

  • please check this code:

    <toolkit:Chart Title="{Binding ChartTitle}" x:Name="myChart" Style="{StaticResource myChartStyle}" BorderBrush="{x:Null}"  Background="Black" Foreground="White">
                <toolkit:ColumnSeries ItemsSource="{Binding LegendList}"
                    DependentValueBinding="{Binding FeatureQuantity}" 
                    IndependentValueBinding="{Binding LegendName}" DataPointStyle="{Binding Source={StaticResource ColorByGradeColumn}}" >
    
                </toolkit:ColumnSeries>
    
                <toolkit:Chart.Axes>
                    <toolkit:CategoryAxis Orientation="X" 
                                          Location="Bottom" 
                                          Foreground="White">
                        <toolkit:CategoryAxis.AxisLabelStyle>
                            <Style TargetType="toolkit:AxisLabel">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate 
                                              TargetType="toolkit:AxisLabel">
                                            <TextBlock 
                                     Text="{TemplateBinding FormattedContent}" 
                                                       TextAlignment="Right" 
                                                       TextWrapping="Wrap" 
                                                       Width="60" 
                                                       Margin="-20,15,0,0" 
                                                       RenderTransformOrigin="0.5,0.5">
                                                <TextBlock.RenderTransform>
                                                    <RotateTransform Angle="90" />
                                                </TextBlock.RenderTransform>
                                            </TextBlock>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </toolkit:CategoryAxis.AxisLabelStyle>
                    </toolkit:CategoryAxis>
                </toolkit:Chart.Axes>
    
            </toolkit:Chart>
    

    and result is: http://upload7.ir/imgs/2014-10/42094080161295718077.png