FIX: render multiline legend items without overlapping (#10532)

[kartik-madhak]

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,
  },
});

[etimberg]

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"