я были некоторые проблемы с легендой chart.js. Легенда с длинным текстом заняла слишком много места, что привело к уменьшению размера моей круговой диаграммы:

Еще один пример:

Если я получу больше легенд, диаграмма пончиков со временем станет все меньше и меньше.

Я пытался установить maxWidth, но безрезультатно.

var options = {
            layout: {
                padding: {
                  top: 5
                }
            },
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                display: true,
                position: 'right',
                maxWidth: 100,
                onClick: null
            },
            animation: {
                animateScale: true,
                animateRotate: true
            },

        };

Есть идеи? Заранее спасибо!

Я попытался следовать этому [решению] [3], чтобы создать легенду HTML:

<div class="box-body" style="height:350px;">
<div class="float-left">
<div class="float-left" style="width:70%">

<canvas id="brandChart" style="position: relative; height: 350px;"></canvas>
</div>
<div class="float-left" style="width:30%">

<div id="js-legend" class="chart-legend">
</div>

</div>
</div>

Это ограничило ширину легенды, но затем это привело к другой проблеме, которая заключается в том, что после того, как я свернул и расширил div, холст просто пропал, и у меня остался только легендарный div.