Change legend in Chart.js v3.9.1 combined bar and line chart

[Anja-R]

I'm using Chart.js v3.9.1 and I'm making a combined bar and line chart to visualize some OEE calculation.
In my data I have 4 types and for each type I have 4 categories, so simplifyed my datasets is on the form
data: array(1,2,3,...)
label: Type : categori
in options I have

plugins: {
			legend: {
				  display: true,
				  position: 'top',
				  labels: {
					usePointStyle: true,
				  },
				},
			},

Now I have all 16 labels show in 2 "rows". Can I change this, so I have 4 rows, one for each type containing the 4 categories?

I have tried to add < BR > and \n in my label, but it's treated as text.
I have found some examples using either generateLabels or htmlLegend, but I just cannot get it to work

[Udemology]

In Chart.js working with the canvas it is tricky to do so. I would recommend to use a HTML legend which gives you far more flexibility on controlling each legend item and adding whitespace and breaks. Perhaps this video will be of help to you: https://youtu.be/BPppGPpbP54