Chart.js
Chart.js copied to clipboard
chartjs
Vertical legend multiline labels overlaps
Expected behavior
It is expected, that multiline label will reserve space to not overlap with next label
Current behavior
Multiline label overlaps with next one
Reproducible sample
https://codepen.io/cellard/pen/vYRpVyP
Optional extra steps/info to reproduce
No response
Possible solution
No response
Context
No response
chart.js version
v3.8.2
Browser name and version
No response
Link to your project
No response
Hey, can you tell where did you see the syntax of passing array of array for the labels field?
Passing array to a label to make it multiline is a well-known receipt suggested by stackoverflow community.
Are you saying this is not declared feature? I count it so natural and surprised not finding it in official documentation... The only place I found is Title Configuration (and Subtitle too), but actually it works for any labels — for dataset, for ticks, etc (see an example below).
The case with "extremely long labels" — https://codepen.io/cellard/pen/xxWYEvX — seems much harder to solve (
It is indeed intentional behaviour. Explanation can be found in the docs here: https://www.chartjs.org/docs/master/general/data-structures.html#data-structures
In case you want multiline labels you can provide an array with each line as one entry in the array
Is there any option to control the gap between the multiline labels?
I am trying to remove gap completely between the multiline labels
