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

6 posts, 0 answers
  1. Mike
    Mike avatar
    23 posts
    Member since:
    Jun 2012

    Posted 12 Sep 2012 Link to this post

    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? 
  2. Nikolay
    Admin
    Nikolay avatar
    385 posts

    Posted 13 Sep 2012 Link to this post

    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

    Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Mike
    Mike avatar
    23 posts
    Member since:
    Jun 2012

    Posted 13 Sep 2012 Link to this post

    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?

  5. Nikolay
    Admin
    Nikolay avatar
    385 posts

    Posted 14 Sep 2012 Link to this post

    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

    Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

  6. Mike
    Mike avatar
    23 posts
    Member since:
    Jun 2012

    Posted 14 Sep 2012 Link to this post

    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?
  7. Nikolay
    Admin
    Nikolay avatar
    385 posts

    Posted 17 Sep 2012 Link to this post

    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

    Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

Back to Top
UI for WPF is Visual Studio 2017 Ready