Stacked bar chart series bars not always proportional

3 posts, 0 answers
  1. David
    David avatar
    25 posts
    Member since:
    Jan 2017

    Posted 23 Jul 2019 Link to this post

    Hi

    I have a stacked bar chart w/ 4 series values. When the first value is large, the axis values appear to be shifted away from 0 and the size of the 2 series bars is no longer proportional.

    For example, I have 4 Series:
      -> 2861
      -> 0
      -> 0
      -> 2

    https://stackblitz.com/edit/angular-nnvc1m

    In this case the 1st bar (2861) should be much larger than the 4th (2). However, the 1st bar appears smaller b/c the axis has shifted to 2860 - 2863. This is misleading.

    I'd like to force the axis to start at 0 and the size of the bars always be proportional (based on the size of each series value).

    Is there a way to do this? I've tried setting narrowRange, min and max in the stackblitz example.

     

    Thanks

     

  2. Svetlin
    Admin
    Svetlin avatar
    388 posts

    Posted 25 Jul 2019 Link to this post

    Hi David,

    Thank you for the demonstrated example.

    Indeed, the [min] input property of the ValueAxisItemComponent should be used in order to achieve the desired behavior. The following markup demonstrates how to set it properly:

    <kendo-chart>
      <kendo-chart-title text="Units sold"></kendo-chart-title>
      <kendo-chart-category-axis>
          <kendo-chart-category-axis-item [categories]="['Q1']">
          </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
      <kendo-chart-value-axis>
        <kendo-chart-value-axis-item [min]="0">
        </kendo-chart-value-axis-item>
      </kendo-chart-value-axis>
      <kendo-chart-series>
        <kendo-chart-series-item type="bar" [stack]="true" [spacing]=".25" [data]="[2861]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="bar" [data]="[0]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="bar" [data]="[0]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="bar" [data]="[2]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>

    Here is the updated example:

    https://stackblitz.com/edit/angular-nnvc1m-jtebze?file=app/app.component.ts

    I hope this helps. Let me know in case further assistance is required for this case.

    Regards,
    Svetlin
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. David
    David avatar
    25 posts
    Member since:
    Jan 2017

    Posted 25 Jul 2019 in reply to Svetlin Link to this post

    Thank you so much again Svetlin !!

     

     

Back to Top