chart.js-如何将图形线延伸到画布的边缘（图片）

Question

我无法找到关于如何将网格线和图形线都延伸到画布边缘并使其填充背景色，同时又保持填充和值比（图片更好地显示了我的意思）的答案

目前，我的画布如下所示：

，我想获得以下示例中的结果：

我当前的代码：

<script>
var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["PON", "WT", "ŚR", "CZW", "PT", "SB"],
        datasets: [{
            data: [56, 35, 35, 60, 20, 50],
            borderColor: [
                'rgba(255,255,255)'
            ],
            borderWidth: 2,

            backgroundColor: 'rgba(0,0,0,0.1)',
            pointRadius: 5,
            pointBorderColor: 'rgb(255,255,255)',
            pointBackgroundColor: 'rgba(112,185,200,1.00)'
        }]
    },
    options: {
        layout: {
            padding: {
                top: 15,
                bottom: 35,
                left: 155
            }
        },

        elements: {
            line: {
                tension: 0
            }
        },
        legend: {
            display: false
        },
        tooltip: {
            enabled: false
        },
        scales: {
            color: 'rgb(255,255,255)',

            yAxes: [{

                position: 'right',
                 labelFontColor: "red",
                ticks: {
                    beginAtZero: false,
                    fontColor: '#eee',
                    fontFamily: "Poppins",
                    padding: 20
                },
                gridLines: {
                    color: 'rgba(255,255,255,0.25)',
                    drawBorder: false,
                }
            }],
            xAxes: [{
                position: 'top',
                color: 'rgb(255,255,255)',
                gridLines: {
                    display: false,
                    drawBorder: false,
                },
                ticks: {
                    fontColor: '#eee',
                    fontFamily: "Poppins",
                    padding: 20
                }
            }]
        }
    }
});
</script>