Chart.js: есть ли способ создать диаграмму с фиксированной высотой и переменной шириной на основе элементов числовой лег ⇐ CSS

[Anonymous]

Мне хотелось бы знать, есть ли способ увеличить ширину диаграммы, если количество элементов в легенде не соответствует ее исходному размеру
Я много пробовал различных настроек и подходов, таких как изменение атрибутов стиля в контейнере, но ни один из них не смог решить мою проблему.
Я использую Chart.js v3.8.1
Я подготовил код, который поможет мне объясните запрос:
Codepen






.container {
width: 100%;
height: 400px;
border: 3px solid red;
display: flex;
}

.chart-container {
border: 2px solid blue;
width: fit-content;
margin: auto 0;
width: fit-content;
}

canvas {
border: 2px solid green;
}


$(document).ready(() => {
let preparedData = prepareData(60);
const config = {
type: "doughnut",
data: preparedData,
options: {
responsive: false,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
position: "right"
}
}
}
};

let chart = new Chart($("canvas"), config);
});

function prepareData(numData) {
let labels = [];
let localData = [];

for (idx = 0; idx < numData; idx++) {
labels.push("Data " + idx);
let random = getRandomInt(100);
localData.push(random);
}

let datasets = [
{
label: "Info",
data: localData,
borderWidth: 0
}
];

return { labels, datasets };
}

function getRandomInt(max) {
return Math.floor(Math.random() * max);
}



Подробнее здесь: https://stackoverflow.com/questions/782 ... e-width-ba