Cartesian Chart Stack100 series label

3 posts, 1 answers
  1. Craig Mellon
    Craig Mellon avatar
    53 posts
    Member since:
    May 2005

    Posted 27 Sep 2012 Link to this post

    Hi, I'm using the RadCartesianChart and bind four series using the Stack100 combine mode. I have a few issues when using the series labels:

    1. It skips a series - the first series label is actually shown in the second series, please see on image; the first 100000 value should be displayed in the green bar, because of this the chart only shows 3 values instead of 4.
    2. I cannot find anyway to declare a label format in the XAML, e.g I need to change 130000 to be shown as £130K
    3. How can I control the labels margin and alignment...I need to right align the labels and ensure they vertically aligned center in the bar

    Please see image attached outling how the bar looks now and how it should look, I've spent hours searching your forums and help files but cannot find a solution.

    Many thanks for any help you can provide!
  2. Answer
    Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 02 Oct 2012 Link to this post

    Hi Craig,

    Here are the things you need to know about series items (some which you might already know):
    • In order for the series labels to be displayed, you have to set the property ShowLabels of the corresponding series to true
    • By default the label visualizes the Value of the corresponding data point, but if you want something else to be displayed you have to set the series LabelDefinition property: 
      <telerik:BarSeries CombineMode="Stack100" ShowLabels="True">
          <telerik:BarSeries.LabelDefinitions>
              <telerik:ChartSeriesLabelDefinition Binding="Name"/>
      In this case the property Name of the underlying business object will be used for the series label
    • You can use the VerticalAlignment and HorizontalAlignment and Margin properties to position the series label.
    • You can use the Format property of the ChartSeriesLabelDefinition to define your custom string. The format is "{}{0:C0}K"
    • However in your case the "K " suffix will not be enough, because you have values larger than 1000000, for which you need the "M" suffix. In this case the most flexible solution is to use a custom coverter. In order to use it you will have to define a DataTemplate for the series labels to use. For example: 
      <telerik:BarSeries CombineMode="Stack100" ShowLabels="True">
        <telerik:BarSeries.LabelDefinitions>
          <telerik:ChartSeriesLabelDefinition VerticalAlignment="Center"
                                   HorizontalAlignment="Center">
            <telerik:ChartSeriesLabelDefinition.Template>
              <DataTemplate>
                <TextBlock
                  Text="{Binding Converter={StaticResource converter}}"/>

    I have attached an example project demonstrating this.

    Regards,
    Petar Kirov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Craig Mellon
    Craig Mellon avatar
    53 posts
    Member since:
    May 2005

    Posted 02 Oct 2012 Link to this post


Back to Top