Как сделать так, чтобы легенда ChartJS Canvas оставалась в одном столбце?

Question

Я проверил несколько разных источников и просмотрел варианты, но я не могу заставить свою легенду остаться в одной колонке. Например,

На изображении выше вы заметите, что одна часть легенды отсекается и отодвигается в сторону. Это происходит в пределах <= 550 пикселей. Я хотел бы заставить их всех оставаться в одной колонке. Вот JSFiddle с воссозданным графиком. Мне пришлось вставить некоторые импорта в начало файла JS, потому что я не смог найти их в опциях скрипта. Прокрутите вниз для соответствующего материала. Любая помощь будет оценена. <a href="https://jsfiddle.net/lochrine/02yrpcxg/" rel="nofollow noreferrer">https://jsfiddle.net/lochrine/02yrpcxg/

Вот соответствующий JS:

//Line Graph Script

$('.line-graph').each(function () {
    var legendlabels = $(this).data('legendlabels');
    var datapoints = $(this).data('datapoints');
    var suppliers = $(this).data('suppliers');

    var datatype = $(this).data('datatype');
    var yAxisString = "Amounts";
    if (datatype == "units") { yAxisString = "Units Sold"; }
    else if (datatype == "money") { yAxisString = "Amount (Dollars)"; }

    console.log(datatype);

    new Chart($(this).get(0).getContext('2d'), {
        type: 'line',
        data: {
            labels: legendlabels,
            datasets: $.map(datapoints, function (e, i) {
                return {
                    backgroundColor: lineChartColors[i],
                    borderColor: lineChartColors[i],
                    fill: false,
                    data: e,
                    label: suppliers[i],
                    lineTension: 0.2,
                }
            })
        },
        options: {
            layout: {
                padding: {
                    left: 20,
                    right: 40,
                    top: 20,
                    bottom: 20
                }
            },
            legend: {
                display: true,
                position: 'left'

            },
            scales: {
                xAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Month'
                    }
                }],
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        callback: function (value, index, values) {
                            return addCommas(value);
                        }
                    },
                    scaleLabel: {
                        display: true,
                        labelString: yAxisString 
                    }
                }]
            },
            plugins: {
                datalabels: {
                    display: false
                }
            },
            tooltips: {
            callbacks: {
                label: function (tooltipItem, data) {
                    var datasetLabel = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toString();
                    var label = data.datasets[tooltipItem.datasetIndex].label + ': ';
                    var formattedReturnLabel;
                    if (datatype == "money") {
                        formattedReturnLabel = label + '$' + addCommas(datasetLabel);
                    } else {
                        formattedReturnLabel = label + addCommas(datasetLabel);
                    }
                    return formattedReturnLabel;
                }
            }
        }
        }
    });

})

И соответствующий HTML:

<div class="widget widget-double">
    <div class="m-3 border">
        <table style="cursor: pointer !important;" onclick="window.location.href='@Url.Action("SupplierUnitsByMonth", "Reports")'" class="table mb-0"><thead><tr><th class="text-center">@ViewBag.widgetName</th></tr></thead></table>
        <div class="w-100 aspect-ratio-50 p-2">
            <canvas id="chart-units-history" data-legendlabels="[@ViewBag.Months]" data-suppliers= "[@ViewBag.suppliers]" data-datapoints="[@ViewBag.supplierTotals]" data-datatype="units" class="line-graph w-100 aspect-ratio-50"></canvas>
        </div>
    </div>
</div>