charts - Chart.JS DataLabels 与图表图例重叠

Question

在我的图表上，我的数据标签与图表顶部的图例重叠。

这是我的代码：

        type: 'bar',
    data: {
        datasets: [
            {
                type:"bar",
                yAxisID: 'left-y-axis',
                //barThickness: 24,
                label: 'Почасовой',
                data: y1,
                backgroundColor: 'rgba(54, 162, 135, 0.2)', //'rgba(75,192, 192, 0.2)',
                borderColor: 'rgba(54, 162, 135, 0.2)',
                borderWidth: 1,
                datalabels: {
                    align: 'center',
                    anchor: 'center',

                    //backgroundColor: 'rgba(54, 162, 135, 0.1)',
                    //function(context) {return context.dataset.backgroundColor;},
                    borderRadius: 4,
                    color: 'rgba(54, 162, 135, 0.8)',//'rgba(75,192, 192, 0.8)',
                    
                    formatter: function(value, context) {
                        if (value > 0)
                            return "+" + Math.round(value)
                        else 
                            return Math.round(value)
                    },
                    display: function(context) {
                        return context.dataset.data[context.dataIndex] != 0; // or >= 1 or ...
                    }
                }
            }, 
            {
                type:"line",
                yAxisID: 'left-y-axis',
                label: 'Накопительный',
                data: y2,
                backgroundColor: 'rgba(255, 255, 255, 0.2)',
                borderColor: 'rgba(54, 162, 135, 1)',
                borderWidth: 2,
                lineTension: 0.3,
                datalabels: {
                    //display: false,
                    align: 'end',
                    anchor: 'end',
                    color: 'rgba(54, 162, 135, 1)', //'rgba(75,192, 192, 1)',
                }
            }, 
            
            {

                type:"line",
                /*
                type: 'candlestick',
                data: {
                    datasets: [{
                        label: 'CHRT - Chart.js Corporation',
                        data: getRandomData(initialDateStr, barCount)
                    }]
                },
                */
                yAxisID: 'right-y-axis',
                //barThickness: 24,
                label: 'Индекс ММВБ',
                data: m,
                backgroundColor: 'rgba(255, 255, 255, 0.2)',
                borderColor: 'rgba(245, 120, 81, 0.5)', //'rgba(14, 67, 96, 0.2)', //'rgba(234, 78, 106, 0.2)',
                borderDash: [20, 3, 3, 3, 3, 3, 3, 3],
                borderWidth: 1,
                datalabels: {
                    display: false,

                }
            }, 

        ],
            labels: x,
    },

    options: {
        title: {
            display: true,
            text: 'График доходности за ' + title,
            fontColor: 'rgba(104, 143, 133, 1)',
            fontSize: '16',
        },
        legend: {
            display: true,
            labels: {
                fontColor: 'rgba(54, 162, 135, 1)',
                //padding: 50, //'2, 3, 4, 5',
            },
            
        },   
        scales: {
            yAxes: [
                {
                    id: 'left-y-axis',
                    position: 'left',
                    //stacked: false,
                    ticks: {
                        beginAtZero: true,
                        callback: (value) => value + "₽",
                        fontColor: 'rgba(104, 143, 133, 1)',
                        //max: cum + cum/5,

                        //padding: 25,


                    },
                    gridLines: {
                        color: 'rgba(104, 143, 133, 0.2)',
                        zeroLineColor: 'rgba(104, 143, 133, 0.5)',
                    },

                },
                {
                    id: 'right-y-axis',
                    position: 'right',
                    gridLines: {
                        display: false,
                    },
                    ticks: {
                        fontColor: 'rgba(245, 120, 81, 0.8)',
                    },

                }
            ],
            xAxes: [
                {
                    //stacked: true,
                    gridLines: {
                        color: 'rgba(104, 143, 133, 0.2)',
                        zeroLineColor: 'rgba(104, 143, 133, 0.5)',    
                        //tickMarkLength: 15                          
                    },
                    ticks: {
                        fontColor: 'rgba(104, 143, 133, 1)',
                    },
               }
            ],
        },
        plugins: {
        },

    }

我怎么能在图例之后留出一些空间，或者让线条稍微低一点，这样图形就不会突出。唯一对我有用的是设置 Y 轴的最大值：

        scales: {
            yAxes: [
                {
                    id: 'left-y-axis',
                    position: 'left',
                    //stacked: false,
                    ticks: {
                        beginAtZero: true,
                        callback: (value) => value + "₽",
                        fontColor: 'rgba(104, 143, 133, 1)',
                        max: maxValFromDataSet + maxValFromDataSet/5,
                        ...

但这看起来不太整洁，因为 Y 轴的最后一步更小：

标签： chartschart.js