Stack Bar

[Daniel]

I have a stack bar chart, and i need to apply the following changes to it:

1. The ChartValueAxisItem horizontal major unit lines need to be displayed above the bars rather than beneath them
2. For each bar, I need to add in some text.  If the bar has a value of 3, then 3 text values equally spaced out will need to be added in that bar

A before and after diagram of what is needed is attached

What is the best approach to achieve this?

[Vladimir Iliev]

Hello Daniel,

 

You can achieve the desired behavior as demonstrated in the following example:

• https://stackblitz.com/edit/react-fvbhau?file=app/main.jsx
  

Regards,
Vladimir Iliev
Progress Telerik

[aleigh]

Definition. A stacked bar format (or stacked bar chart) is a chart that makes use of bars to show comparisons between categories of data, however with capacity to break down and examine components of a whole. Each bar in the chart represents a whole, and segments in the bar signify exceptional parts or categories of that whole.

[Stefan]

Hello, Aleigh,

Thank you for sharing the definition.

Is there anything we can be of help?

Regards,
Stefan
Progress Telerik

[Lara Marie]

Hi,

In continuation with the above, I am trying to equally space out the text on each bar section, such that each word is within its above and below horizontal major unit lines. Attached file contains an image of how the words look right now (not equally spaced).

Thanks

[Stefan]

Hello, Lara,

The Chart provides different positions for its labels.

Please check the list of the available positions to see if one of them will be a good fit for the real application:

telerik.com/kendo-react-ui/components/charts/api/SeriesLabelsPosition/

Regards,
Stefan
Progress Telerik