Chart.js
Chart.js copied to clipboard
FIX: render multiline legend items without overlapping (#10532)
Co-authored-by: Nirav Chavda [email protected]
Fixes: this issue
Explanation
Previously all the labels were considered to have a constant height, we changed it so that it calculates the height in case of multi-line labels
Screenshot
Input for the above screenshot: -
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: [
'Some Text',
[
'ABCDEFG',
'ABCDEFG',
],
[
'Hello World',
'Lorem Ipsum',
'Multi Line Text',
],
'Some Text',
'Some Text',
'Some Text',
],
datasets: [
{
label: 'test',
data: [
73.42,
18.13,
7.54,
0.9,
0.0025,
1.8e-5,
],
backgroundColor: [
'#0078C2',
'#56CAF5',
'#B1E3F9',
'#FBBC8D',
'#F6A3BE',
'#4EC2C1',
],
},
],
},
options: {
plugins: {
legend: {
labels: {
usePointStyle: true,
pointStyle: 'rect',
},
position: 'right',
align: 'center',
maxWidth: 860,
},
},
aspectRatio: 3,
},
});
Looks like the size limit needs to be increased slightly to accommodate this change. @kartik-madhak can you up that and then we'll merge this?
It's this file https://github.com/chartjs/Chart.js/blob/master/.size-limit.cjs and the failing GH action logs https://github.com/chartjs/Chart.js/blob/master/.size-limit.cjs#L37 should be updated. I think a good new size is "27.5KB"