Stacked Bar Chart, Data Start from 0 - Angular 2

8 posts, 1 answers
  1. Georgi
    Georgi avatar
    16 posts
    Member since:
    Feb 2015

    Posted 08 Sep Link to this post

    Hello,

     

    I want to achieve a stacked bar chart and the values to start from 0, what I mean is when I have for example 1 Category with 2 Series Items, one with Data value 1 and another with Data value 3 the stacked chart looks like 1 and 3 in different colors but going to 4 on the X axis(value axis) so it is summing them..

    What I want is to be stacked.. like bar going to 3 and then another going to 1 over it thus going to 3 on the value axis.

    Here is an example.

     

    Another question, how to achieve something like the picture I send.

    It's a stacked bar chart with lets say 2 Categories but for all values on the Y axis..

     

    Thank you!

  2. Georgi
    Georgi avatar
    16 posts
    Member since:
    Feb 2015

    Posted 08 Sep Link to this post

    I mean not to stack them on top of each other but to overlay them.
  3. Georgi
    Georgi avatar
    16 posts
    Member since:
    Feb 2015

    Posted 08 Sep Link to this post

    OK. I managed to do the following: example

    Which answers my second question.

  4. Answer
    Daniel
    Admin
    Daniel avatar
    2173 posts

    Posted 12 Sep Link to this post

    Hello,

    I am not sure if I understand correctly the requirement. If the stack should represent the sum and point to value 4 as in the description you should use the stack option - example.
    If the bars should be rendered on top of each other and the maximum value shown should be 3 then you can set the spacing to -1 - example.
    If the bars should be rendered from different origin like in the image then you should change the axisCrossingValue - example.

    Regards,
    Daniel
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Georgi
    Georgi avatar
    16 posts
    Member since:
    Feb 2015

    Posted 13 Sep Link to this post

    One question left:

    Spacing should be calculated?

    Because Spacing -1 on floating point numbers is not working..

    I need to show the bar as not the sum of both series but as the max of one of  them..

    So Spacing should be calculated and it should be the smaller serie? Thus leading to the question: how to set spacing only for one bar..

     

  6. Daniel
    Admin
    Daniel avatar
    2173 posts

    Posted 15 Sep Link to this post

    Hello again,

    The spacing option is not for to specific series. It is used for the layout of all bars in a category. It should not be necessary to use different value depending on the data. Could you clarify in which case setting -1 is not working?

    Regards,
    Daniel
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Georgi
    Georgi avatar
    16 posts
    Member since:
    Feb 2015

    Posted 15 Sep in reply to Daniel Link to this post

    Hello,

    Here is an example of the problem: Plnkr

    actually I found out what the problem is before posting, but still wanted to give you a heads up.

    So apparently when u mix Stack property with Spacing property -1, spacing is actually not working.. when you leave only Spacing -1 it is stacking them.

    Thanks for the help!

  8. Daniel
    Admin
    Daniel avatar
    2173 posts

    Posted 19 Sep Link to this post

    Hello,

    The behavior is expected. The gap and spacing options are used for not stacked layout.

    Regards,
    Daniel
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top