0

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

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.

אור ברמן
  • 13
  • 2

1 Answers1

0

You can wrap the doughnuts and labels into two different div's with fixed width so that no matter the content the container's width would stay the same.

Yong
  • 1,622
  • 1
  • 4
  • 29
  • this is what i done , , but the space between the labels box and the doghunt itself is the problem. i want to make the labels box width fixed , the padding between the dougnt and the labels box fixed , and the doughnt width fixed.. – אור ברמן Nov 24 '21 at 09:20