如何强制将图例保留在JS图表的单个列中？

Question

编辑：这是一个JSFiddle，具有重新创建的图表。任何帮助，将不胜感激。 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>