Rotate Independent Axis Labels on WPF Chart with Code-Behind Stacked Columns Series

Question

I have a WPF stacked columns chart that shows the number of injuries of each type in each date range.

Each independent (X-axis) value will be a month or a year, so I can't just use a straight DateTime for the label type.

I'm trying to rotate these labels 45 degrees, but it actually adds an extra set of labels for this style from 0 to 1.0 and moves my desired labels on the chart's top (divider added to save image width):

The code behind that generates the chart data:

var dataSeries = new StackedColumnSeries();
// injuryTypes is of type List<KeyValuePair<string, string>>.  KVP example: "Heat Burns", "HB" 
// injuries is of type List<List<KeyValuePair<string, decimal>>>.  KVP example: "2015 Avg. Mo.", 12

chtHoursLost.Series.Clear();

for (var i = 0; i < injuries.Count; i++)
{
    var columnColor = new Style();
    var injurySeriesDef = new SeriesDefinition()
    {
        ItemsSource = injuries[i],
        DependentValuePath = "Value",
        IndependentValuePath = "Key"
    };

    injurySeriesDef.Title = string.Format("{0} ({1})", ((KeyValuePair<string, string>)
        (injuryTypes[i])).Value, injuryTypes[i].Key);
    columnColor.Setters.Add(new Setter(BackgroundProperty, new SolidColorBrush(
        Utility.GetInjuryColor(((KeyValuePair<string, string>)(injuryTypes[i])).Key))));
    injurySeriesDef.DataPointStyle = columnColor;
    dataSeries.SeriesDefinitions.Add(injurySeriesDef);
}

chtHoursLost.Series.Add(dataSeries);

var tiltedAxisLabelStyle = ((Style)(this.FindResource("stlAngledDates")));
axsHoursLostX.AxisLabelStyle = tiltedAxisLabelStyle;

Relevant XAML:

xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
<Window.Resources>
    <Style x:Key="stlAngledDates" TargetType="{x:Type chartingToolkit:AxisLabel}">
        <!--<Setter Property="StringFormat" Value="{}{0:d-MMM}" />-->
        <Setter Property="RenderTransformOrigin" Value="1,0.5" />
        <Setter Property="RenderTransform">
            <Setter.Value>
                <RotateTransform Angle="-45" />
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
...
<chartingToolkit:Chart x:Name="chtHoursLost" Grid.Row="1" Grid.Column="0" Margin="10,0,10,10" Title="Hours Lost/Restricted By Injury" Height="auto" Width="auto">
    <chartingToolkit:StackedColumnSeries x:Name="scsHoursLost" />
    <chartingToolkit:Chart.Axes>
        <chartingToolkit:LinearAxis x:Name="axsHoursLostX" Orientation="X"/>
        <chartingToolkit:LinearAxis Orientation="Y"  Title="Hours Lost" Minimum="0" Interval="35" ShowGridLines="True" />
    </chartingToolkit:Chart.Axes>
</chartingToolkit:Chart>

I also tried something like this, and though the extra set of labels is gone, the right labels aren't rotated.

var injurySeriesDef = new SeriesDefinition()
{
    ItemsSource = injuries[i],
    DependentValuePath = "Value",
    IndependentValuePath = "Key",
    RenderTransformOrigin = new Point(1, 0.5),
    RenderTransform = new RotateTransform() { Angle = -45 }
};

How can I get the date range labels to rotate? Thank you...

jsanalytics jsanalytics · Accepted Answer · 2017-04-26T13:10:05

You may want to use a CategoryAxis instead. Also, increase its Height to accomodate the label properly, as below:

<chartingToolkit:Chart x:Name="chtHoursLost" Grid.Row="1" Grid.Column="0" Margin="10,0,10,10" Title="Hours Lost/Restricted By Injury" Height="auto" Width="auto">
    <chartingToolkit:StackedColumnSeries x:Name="scsHoursLost" />
    <chartingToolkit:Chart.Axes>
        <chartingToolkit:CategoryAxis x:Name="axsHoursLostX" Orientation="X" Height="50" />
        <chartingToolkit:LinearAxis Orientation="Y"  Title="Hours Lost" Minimum="0" Interval="35" ShowGridLines="True" />
    </chartingToolkit:Chart.Axes>
</chartingToolkit:Chart>

Rotate Independent Axis Labels on WPF Chart with Code-Behind Stacked Columns Series

1 Answers