adjust legend box width

[orber3]

Hey !
i have 2 Doughnut that needs to be aligned 1 avobe another
you can see in the image below:

the Doughnuts are not aligned as you can see beacuse the labels length is not equal.

i have played with plugins.legend.labels alot but couldnt make the legend labels width to be fixed so the dougnt wont move according to the labels length.

** my code **

export const DEFAULT_DOUGHNUT_OPTIONS = {
maintainAspectRatio: false,
aspectRatio: 1,
resizeDelay: 1000,
// disable animation
animation: {
duration: 0, // general animation time
},
plugins: {
legend: {
labels: {
generateLabels: (chart: any) => {
const { data } = chart;
return generateLabels(data);
},
color: darkMainTextColor,
font: {
size: 14,
family: fontFamily,
},
usePointStyle: true,
boxWidth: 160,
padding: 10,
},
position: 'right',
rtl: true,
maxWidth: 160,
},
},
borderWidth: 1,
cutout: '80%',
};

tried to play with boxWidth , maxWidth and more... didnt help
please help :)

thanks for the helpers.

[ghost]

Here are two options you can try:

1. Create a custom plugin that will adjust the width of the legend. Tutorial: https://www.youtube.com/watch?v=tYHY9KCSPvY&ab_channel=ChartJS
2. In a similar situation I personally ended up disabling ChartJs legend altogether and building my own legend:

const theme = [{id: 'value1', name:'abc', color:'rgba(0, 96, 131, 1)'},...];

<ng-container *ngFor="let item of theme">
  <svg height="20" width="180" xmlns="http://www.w3.org/2000/svg" class="m4">
    <circle cx="10" cy="10" r="10" [style.fill]="item.color" /> 
    <text x="24" y="14">{{item.name}}</text>
  </svg>
</ng-container>