Tengo un requisito en el que necesito dividir las leyendas en la siguiente línea en chart.js. Tengo 2 juegos de leyendas con grupo ordenado y grupo comido. Necesito todo el grupo ordenado en una línea y el grupo comido en una línea. Estoy usando chart.js versión 2.9.3 y ng2 charts versión: 2.2.3 con Angular 10. He estado atascado por un tiempo con esto.

La primera línea debe tener: Hoja ordenada Manzana ordenada Mango ordenado Naranja y luego debe dividirse en la siguiente línea para el siguiente conjunto / n

La segunda línea debería tener: comió hoja comió manzana comió mango comió naranja.

El comportamiento actual se refiere al enlace de la imagen a continuación.

[1]: https://i.stack.imgur.com/SZtLv.png

mi html:

 <div> <canvas baseChart [datasets]="chartData" [labels]="chartLabels" [options]="chartOptions" [legend]="chartLegend" [chartType]="bar"> </canvas> </div>

Mi componente:

 this.chartData = data.Datasets; this.chartLabels = data.labels this.chartLegend= true; this.chartOptions= { scaleShowVerticalLines: false, responsive: true, title: { display: true, text: "Vegetables sale", }, legend: { position: "bottom", labels: { usePointStyle: true, fontSize: 10 }, }, scales: { yAxes: [{ stacked: true, ticks: { beginAtZero: true }, scaleLabel: { display: true, labelString: 'Total' } }], xAxes: [{ stacked: true, barPercentage: 0.7, categoryPercentage: 0.7 }] } };

Nota: no estoy usando leyendas HTML.