图表JS-折线图从顶部和右侧切出

Question

我试图使用图表js绘制折线图。该图从右上方开始切割。尝试使用填充，但仍然面临相同的问题。另一个问题是x和y轴线很轻。它们很少可见。 这是将要剪切的图形[https://i.stack.imgur.com/xz9a2.jpg]。

这是已尝试的代码

var time = ["0", "150", "0", "10", "20", "30", "0", "150", "0", "150", "0", "150", "0", "50", "200", "250", "200", "300"]
var temperature = ["50", "650", "50", "650", "850", "1030", "50", "560", "50", "560", "50", "560", "50", "1200", "1250", "1300", "1350", "1400"]
var ctx = document.getElementById('myChart').getContext('2d');
    ctx.width=500;
    var chart = new Chart(ctx, {
        type: 'line',
         data: {
            labels: time,
            datasets: [{
                borderColor: 'rgb(0,0,0)',
                data: temperature,
                fill:false,
                steppedLine: true,
            }]
        },
         options: {
                bezierCurve : false,
                animation: false,
                    legend: false,
                    //Changing Plugins
                    plugins:{
                    datalabels: {
                    color: '#1a1b1c',
                    align: 'end',
                    anchor: 'end',
                    font: {
                    weight: 'bold',
                    size: 20,
            },
            },
                    },
                    scales: {
                        xAxes: [{
                                display: true,
                                fontColor: 'black',
                                fontSize:20,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Time',
                                },
                                ticks: {
                                    fontColor: "black",
                                    fontStyle: "bold",
                                    fontSize: 20,
                                  },
                                  gridLines: {
                                    display:false
                                }
                            }],
                        yAxes: [{
                                display: true,
                                fontColor: 'black',
                                fontSize:20,
                                scaleLabel:{
                                    labelString: 'Temperature',
                                },
                                ticks: {
                                    beginAtZero: false,
                                    steps: 100,
                                    stepValue: 25,
                                    //max: 1200,
                                    fontColor: "black", 
                                    fontStyle: "bold",
                                    fontSize: 20,
                                },
                                gridLines: {
                                    display:false
                                },
                            }],
                    },
    },
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
    <canvas id="myChart" width="400" height="400"></canvas>