Chart Category Axis Item labels Position

[David]

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

 

[Svet]

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

[David]

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

[Svet]

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

[David]

Thanks again Svetlin !!