Clustered Bar Chart - Dual X axis labels. Is this possible?

[Mike]

What I'd like to achieve is like these two image attachments which were created in Excel. I'd like to have two levels of X-Axis labelling. I'd also like to have clustered and stacked.

Is this possible with the Telerik WPF charting tools? 

[Nikolay]

Hello,

Please, find a Stacked/Clustered Bar demo example here.

As for the dual horizontal axis labeling, you can achieve this by applying a style. It is demonstrated in this example. Here is how the horizontal axis looks like :

<chart:RadCartesianChart.HorizontalAxis>
    <chartView:DateTimeContinuousAxis
        MajorStep="3"
        MajorStepUnit="Month"
        GapLength="0.8"
        PlotMode="OnTicksPadded"
        LabelTemplate="{StaticResource axisLabelTemplate}">
    </chartView:DateTimeContinuousAxis>

This is the axisLabelTemplate ( from Resources ) :

<DataTemplate x:Key="axisLabelTemplate">
        <TextBlock Text="{Binding Converter={StaticResource axisLabelConverter}}"
                       TextAlignment="Center"
                       Style="{StaticResource axisTextStyleMain}" />
    </DataTemplate>

And the label converter used for the dual labeling looks like this :

public class AxisLabelConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            DateTime date;
            if (value is DateTime)
                date = (DateTime)value;
            else
                date = DateTime.Parse((string)value);
            if (date != null && date.Month == 1)
                return String.Format("{0:MMM}" + Environment.NewLine + "{0:yyyy}", date);
            else
                return String.Format("{0:MMM}", date);
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

You can find the whole code of the demo example in the Code tab. Hope this helps.

Greetings,
Nikolay
the Telerik team

[Mike]

Thank you for this information.

Would you be able to do do this with non date type values as in my new example I've attached?

Would you be able to put a larger tick mark around the outer X-Axis value? In the example, notice that between Section A and Section B there is a longer tick mark.

Also, from you example, I'm not sure I can see how to do this and have the combine mode be stacked?

[Nikolay]

Hello Mike,

The type of the value, whether it is a DateTime one on a DateTimeContinuous axis or a double one on a Linear axis, for example, would be of no relevance to the dual horizontal axis labeling - it would work in either case,the only difference being in the AxisLabelConverter method.

It is the same with the Bar combine mode - it would work regardless of the type of axis or data that you are using, but please note that the DateTimeContinuous axis would normally be more appropriate for Line/Spline type of series and not Bar series. In your case it seems that the more appropriate horizontal axis type should be either DateTimeCategorical or Categorical.

As for the ticks length, you can alter them by updating the ticks template, here is a sample code demonstrating how this can be achieved :

<telerik:DateTimeContinuousAxis.MajorTickTemplate>
                           <DataTemplate>
                               <Rectangle Fill="Gray" Width="1" Height="4" Margin="0,0,0,2"/>
                           </DataTemplate>
                       </telerik:DateTimeContinuousAxis.MajorTickTemplate>

Regards,
Nikolay
the Telerik team

[Mike]

Thank you for this information. One thing I am still not sure about, though is how to have a bar chart that is stacked AND clustered. Is that possible?

[Nikolay]

Hi Mike,

Yes, it is possible to have both stacked and clustered bars. If we take our demo example, you can make the first two bars ( green and blue ) stacked by setting their CombineMode to Stacked and then set the CombineMode for the other two bars ( orange and yellow ) as Clustered. This way you can have both, as long as each bar has the same CategoryBinding.

Kind regards,
Nikolay
the Telerik team