I have a requirement where I need to break legends into next line in chart.js. I have 2 sets of legends with ordered group & ate group. I need all the ordered group in one line & ate group in one line. I'm using chart.js version 2.9.3 & ng2 charts version : 2.2.3 with Angular 10. I have been stuck for a while with this.
1st line should have : Ordered leaf Ordered apple Ordered mango Ordered Orange & then it should break into next line for next set /n
2nd line should have : ate leaf ate apple ate mango ate Orange.
Current behaviour refer to image link below.
[1]: https://i.stack.imgur.com/SZtLv.png
my html:
<div>
<canvas baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="bar">
</canvas>
</div>
My component:
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
}]
}
};
Note: I'm not using HTML legends.