How to create custom legend/ How to provide line break in the legend if it is long text?

### Documentation Is:

- [X] Missing or needed?
- [X] Confusing
- [ ] Not sure?

### Please Explain in Detail...

Hi,
I am new at chart.js. I want to add the line break in the legend and I have tried several ways but it did not work for me.
I did not get any relevant source code in the documentation as well.

I have also tried using legendCallback function in the options plugin but when I call it, it says this.chart.generateLegend() is not a function.
Can anyone help me here??
Providing my code below.

` createChart() {
this.chart = new Chart(this.ctx, {
type: 'pie',
data: this.data,
options: this.options,
});
}
options = {
responsive: false,
display: true,
plugins: {
// plugins: ['Twitter (X)', 'Facebook', 'Instagram'],
legend: {
position: 'right',
maxHeight: 100,
itemMarginBottom: 10,
display: false,
},
legendCallback: (chart: any) => {
console.log('Legend Callback Executed');
var text = [];
text.push('

');
const datasets = chart.data.datasets;
for (let i = 0; i < datasets.length; i++) {
const dataset = datasets[i];
text.push('
• ');
  text.push(
  ``
  );
  text.push(`${dataset.label}`);
  const dynamicItem = this.dynamicData.find(
  (item: any) => item.platform === dataset.label
  );
  text.push(`

  Total Post: ${dynamicItem.posts}

  `);
  text.push(`

  Total Comments: ${dynamicItem.comments}

  `);
  text.push(
  `

  Pro: ${dynamicItem.pro}, Anti: ${dynamicItem.anti}

  `
  );
  text.push('
');
}
text.push('

');
return text.join('');
},

},

onClick: this.onChartClick.bind(this), // Bind the click event handler
} as ChartOptions<'pie'>;

ngOnInit() {
const canvas = document.getElementById(
'chart-container'
) as HTMLCanvasElement;
if (canvas) {
this.ctx = canvas.getContext('2d');
this.legend = document.getElementById('legend');
this.createChart();
} else {
console.error('Canvas element not found');
}
}

dynamicData: any = [
{
platform: 'Facebook',
posts: 240,
comments: 50,
pro: 30,
anti: 20,
},
{
platform: 'Twitter (X)',
posts: 100,
comments: 30,
pro: 15,
anti: 5,
},
{
platform: 'Instagram',
posts: 50,
comments: 20,
pro: 5,
anti: 15,
},
];

ctx: any = null;
chart: any;
legend: any;

data: any = {
labels: ['Twitter (X)', 'Facebook', 'Instagram'],
datasets: [
{
fill: true,
label: 'Posts Count',
data: [240, 100, 50], // posts count for Facebook, Twitter, Instagram
backgroundColor: [
'rgba(54, 162, 235, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1,
},
],
};

`

### Your Proposal for Changes

Add brief with some more context in the docs.

### Example

_No response_