Chart Category Axis Item labels Position

5 posts, 2 answers
  1. David
    David avatar
    25 posts
    Member since:
    Jan 2017

    Posted 16 Apr 2019 Link to this post

    Hi

    I have a stacked bar chart that I want to have the Chart Category Axis Item labels positioned to right.

    By using the position attribute which of type AxisLabelsPosition ( 'start' | 'end' | 'onAxis' | ''), I can place the columns to the right of the series bar.

    However, in my sample

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

    It appears as though only 2 columns can appear to the right, the other column gets wrapped to the 'start' of the category axis

    Any ideas how to get 3 columns to the right of the series bar ?

    Thanks

     

  2. Answer
    Svetlin
    Admin
    Svetlin avatar
    382 posts

    Posted 18 Apr 2019 Link to this post

    Hi David,

    Thank you for the demonstrated example.

    We can position the kendo-chart-category-axis-item components by utilizing the [axisCrossingValue] input property of the ValueAxisItemComponent. Check the following updated example demonstrating this approach (it does not use the [position] input property for the labels):
    https://stackblitz.com/edit/angular-hmqp9n-urthrt?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/or 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 18 Apr 2019 in reply to Svetlin Link to this post

    Thank you very much Svetlin, 

    That does answer most of my question, I have another question label position and wanted to know if the following is possible

    I'm creating a reusable component and sometimes we need the last row to be on the right side

    I redid my sample ... https://stackblitz.com/edit/angular-hmqp9n-wrlx5u?file=app/app.component.ts 

    but notice how the totals are on the left side?  

    Is it possible to achieve the attached image with the totals on the right side?

    Thanks

  4. Answer
    Svetlin
    Admin
    Svetlin avatar
    382 posts

    Posted 22 Apr 2019 Link to this post

    Hi David,

    We could add another category axis, that we can position with the [axisCrossingValue] input property of the ValueAxisItemComponent. However, this approach does not seem to fully satisfy the needs for this use case scenario. Thus, we could implement a custom approach that would be to create an element that holds the desired information and position it on top of the Chart, at the desired location. Check the following example demonstrating these suggestions:
    https://stackblitz.com/edit/angular-hmqp9n-bpuve4?file=app/app.component.ts

    I hope this helps.

    Regards,
    Svetlin
    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.
  5. David
    David avatar
    25 posts
    Member since:
    Jan 2017

    Posted 01 May 2019 in reply to Svetlin Link to this post

    Thanks again Svetlin !!
Back to Top