How to show aggregate values of bars

4 posts, 0 answers
  1. lu
    lu avatar
    1 posts
    Member since:
    May 2018

    Posted 28 May 2018 Link to this post

    Hello Telerik Team,

    I have an issue with showing the aggregate value in bar charts.

    Could I show the aggregate values of bars like the attachment shows?

    The attachment used another UI and I want to replace it with kendo UI.

    Thank you!

  2.
  3. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 30 May 2018 Link to this post

    Hello Lu,

    You can achieve this if you use a label template for your series that are placed on the top of the stack and bind the template to the stackValue template variable.
    seriesDefaults: {
      type: "column",
      stack: true
    },
    series: [{
      field: "a",
      name: "a"
    },{
      field: "b",
      name: "b"
    },{
      field: "c",
      name: "c",
      labels: {
          template: "#= stackValue #",
          visible: true
      }
    }]

    This article shows such an example:
    Show Total for Stacked Series

    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Saeed
    Saeed avatar
    3 posts
    Member since:
    Sep 2012

    Posted 18 Nov 2019 in reply to Tsvetina Link to this post

    Hi,

    this works if the last series exists in every bar but what if only the second series defined or the first one is presented? how can i display the "stackValue" without relying on the last series?

     

    thanks!

  7. Tsvetomir
    Admin
    Tsvetomir avatar
    756 posts

    Posted 19 Nov 2019 Link to this post

    Hi Saeed,

    My name is Tsvetomir and I will be covering for my colleague Tsvetina.

    In general, the most straightforward way to tackle the issue is to always have all of the series. For the ones that you would like to not show, I can recommend setting a value of 0. Visually only 2 series would be shown. However, the label would be shown as if a third series was present.

    Alternatively, you would have to set the labels template for each of the series declarations and check which one should be used. For instance, if the third series is present, do not render labels for the other ones.

    I recommend that you utilize the first approach. However, in case additional clarifications are needed, feel free to contact me back.

     

    Kind regards,
    Tsvetomir
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  8.
Back to Top