How can I force my ChartJS canvas legend to stay i

问题:

I've checked some different sources and looked around the options, but I can't seem to be able to get my legend to stay in one column. For example,

In the picture above, you'll notice one piece of the legend is getting cut off and placed to the side. This happens at around <= 550 pixels. I would like to force them all to remain in one column. Here is a JSFiddle with the chart recreated. I had to paste in some imports in the beginning of the JS file, because I couldn't find them in the fiddle options. Scroll to the bottom for the relevant stuff. Any help would be appreciated. https://jsfiddle.net/lochrine/02yrpcxg/

Here is the relevant 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;
                }
            }
        }
        }
    });

})

And the relevant 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>