Handling Long Y-Axis Labels in Horizontal Bar Charts - Cutoff Issue

[jacksonatunwrap]

Handling Long Y-Axis Labels in Horizontal Bar Charts - Cutoff Issue

I'm creating horizontal bar charts where the y-axis labels can be quite long, often full sentences.

This is causing a problem where labels exceeding the width of the longest bar are cut off on the left side.

For example, a chart categorizing mentions for this post may look like this:

"I have trouble with rendering labels on horizontal bar charts" - |||||||| 2 mentions.
"I want to be able to wrap y-axis labels" - |||| 1 mention.

The problem is when the y-axis label text width is greater than the longest horizontal bar width, the left side of the label gets cut off.

Following the example above, this issue may result in the chart looking like this:

"ble with rendering labels on horizontal bar charts" - |||||||| 2 mentions.
"e able to wrap y-axis labels" - |||| 1 mention.

What I've Tried:

Truncating Labels: I've tried shortening the labels by adding ellipses (...) to the end, but the requirement is to display the entire label. This approach is not suitable for my needs.

Increasing Chart Width: I've also tested increasing the overall width of the chart to give the labels more horizontal space. While this sometimes works, it's not a reliable solution because the chart is often constrained by the width of its parent container, which I cannot always control. The chart needs to render within a limited space.

Adding Padding To Left: Similar problem to the attempt above because the chart overflows on the right.

My Goal:

I need a way to wrap the y-axis labels within the available space, increasing the bar height as needed to display the full label.

Ideally, this would be a built-in feature or a well-maintained plugin.

Specific Questions:

Is there a recommended approach or existing plugin for handling long y-axis labels in Chart.js horizontal bar charts? Assume I am not able to increase the width of the chart's parent element.

If a dynamic bar height adjustment is the solution, how can I calculate the text height (or number of lines after wrapping) within Chart.js to properly size the bars?

Are there any CSS tricks or workarounds that might help, considering the canvas context?

StackOverflow Posts Answers Not Working:

https://stackoverflow.com/questions/48968613/chartjs-y-axis-getting-cut-off-with-long-numbers

https://stackoverflow.com/questions/76039537/y-axis-labels-are-getting-cut-off-on-horizontal-bar-chart-in-mobile-view-chart

Contributing:

If there is no current prop to enable this conditional, can I contribute to this feature?

[Cyrille37]

Hi @jacksonatunwrap
You can split long label in a Array

• Labels text line break #11738
• https://stackoverflow.com/questions/53858517/chartjs-break-line-for-axes-tick-labels-text