Диаграмма. js: Странное изображение в верхнем левом углу?

Question

В верхнем левом углу изображения диаграммы на холсте появляется странный визуал, который выглядит как строка, обрезанная холстом. Изображение визуального появления

Это остается независимо от размера холста или браузера, который я использую для открытия HTML -файла.

Я также не могу вспомнить, когда этот визуал впервые начал появляться, и я попытался исправить это, удалив части кода, чтобы увидеть, когда он начинает появляться, но в настоящее время безрезультатно. Если кто-то сможет найти решение этой проблемы, я буду признателен за вашу помощь.

Мой текущий Код: Javascript Код:

const offset = 27;
var myChart = new Chart(document.getElementById('Chart'), {
type: 'bar',
plugins: [{
    afterUpdate: function(chart) {
        var dataset = chart.config.data.datasets[1];
        for (var i = 0; i < dataset._meta[0].data.length; i++) {
            var model = dataset._meta[0].data[i]._model;
            model.x += offset;
            model.controlPointNextX += offset;
            model.controlPointPreviousX += offset;
        }
        var dataset = chart.config.data.datasets[2];
        for (var i = 0; i < dataset._meta[0].data.length; i++) {
            var model = dataset._meta[0].data[i]._model;
            model.x += offset;
            model.controlPointNextX += offset;
            model.controlPointPreviousX += offset;
        }
    },
}],
data: {
    labels: ['Black', 'Red','Cyan',
             'Blue', 'Orange', 'Purple',
             'Green','Grey', 'Other'],
    datasets: [{
        label: 'Result now',
        data: [18.4, 34.9, 6.1, 9.8,15.3,3.6,4.3,5.7,1.9],
        backgroundColor: [
            '#000000',
            '#fa0000',
            '#09fae0',
            '#0011ff',
            '#ff7300',
            '#d400db',
            '#00ff09',
            '#666666',
            '#bababa'
        ],
        categoryPercentage: 1.0,
        barPercentage: 0.45,
        xAxisID: "Now",
        datalabels: {
            color: 'rgba(0,0,0,1)',
            anchor: 'end',
            align: 'top'
        },
    },
    {
        //Previous Election | Current Result highter
        label: 'Last Result',
        data: [, 20.1, , , 8.9,,3.4, ,1.5],
        backgroundColor: [
            'rgba(0, 0, 0, 0.4)',
            'rgba(250, 0, 0, 0.4)',
            'rgba(9, 250, 224, 0.4)',
            'rgba(0, 17, 255, 0.4)',
            'rgba(255, 115, 0, 0.4)',
            'rgba(212, 0, 219, 0.4)',
            'rgba(0, 255, 9, 0.4)',
            'rgba(102, 102, 102, 0.4)',
            'rgba(186, 186, 186, 0.4)'
        ],
        categoryPercentage: 1.0,
        barPercentage: 0.3,
        xAxisID: "Then",
        datalabels: {
            color: 'rgba(0,0,0,0.7)',
            anchor: 'end',
            align: '-50'
        },
    },
    {
        //Previous Election | Current Bars lower
        label: 'Last Result',
        data: [25.7, ,16.4 ,16.1 , ,4.7,, ,],
        backgroundColor: [
            'rgba(0, 0, 0, 0.4)',
            'rgba(250, 0, 0, 0.4)',
            'rgba(9, 250, 224, 0.4)',
            'rgba(0, 17, 255, 0.4)',
            'rgba(255, 115, 0, 0.4)',
            'rgba(212, 0, 219, 0.4)',
            'rgba(0, 255, 9, 0.4)',
            'rgba(102, 102, 102, 0.4)',
            'rgba(186, 186, 186, 0.4)'
        ],
        categoryPercentage: 1.0,
        barPercentage: 0.3,
        xAxisID: "Then_2",
        datalabels: {
            color: 'rgba(0,0,0,0.7)',
            anchor: 'end',
            align: 'end'
        }
    }]
},
options: {
    responsive: false,
    legend: {
        display: false,
        onClick: false,
    },
    scales: {
        xAxes: [{
            id: "Now",
            gridLines: {
                display: false
            },
            ticks: {
                fontColor: 'rgba(0,0,0,1)'
            }
        },
        {
            id: "Then",
            offset: true,
            display: false
        },
        {
            id: "Then_2",
            offset: true,
            display: false
        },
        ],
        yAxes: [{
            ticks: {
                min: 0,
                max: 50,
                stepSize: 10,
                fontColor: 'rgba(0,0,0,1)',
                callback: function(value, index, values) {
                    return value + '%';
                }
            },
            gridLines: {
                display: true,
                color: 'rgba(0,0,0,0.3)',
            },
            scaleLabel :{
                display: true,
                labelString: "Vote Share",
                fontColor: 'rgba(0,0,0,1)'
            }
        }]
    },
    plugins: {
        datalabels: {
            formatter: function(value, context) {
                return value + '%';
            },
        }
    },
}
});

Html Код:

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <title> Chart Test </title>
      <link rel="stylesheet" href="style.css">
</head>

<body>
  <br>
  <script src="chartjs/dist/Chart.bundle.min.js"></script>
  <script src="chartjs/dist/chartjs-plugin-datalabels.js"></script>
  
  <div id="Result">
    <h3>Results</h3>
    <canvas id="Chart" width="1055px" height="705px"></canvas>
    <script type="text/javascript" src="js/Chart_1.js"></script>
  </div>
</body>
<html>

CSS Код:

#Result{
float: center;
width: 1095px;
height: 805px;
text-align: center;
}