Неожиданное изменение размера и обрезка Chartjs после обновления данных. Использование Laravel Blade View и Livewire

Моя диаграмма изначально загружается с помощью кода, показанного ниже. Это нормально работает.

Затем через событие Livewire я обновляю данные. В свойстве data в источнике я вижу, что данные правильно обновлены в объекте myChart, так что, похоже, это тоже работает.

Проблема в том, что после обновления график отображается некорректно. Он обрезан, кажется увеличенным и составляет около 20% от исходного размера при первой загрузке. Из-за этого я не вижу, правильно ли происходит обновление и обновление данных, но, как указано, я вижу в исходном коде, что данные обновляются в объекте правильно.

Обновить

Livewire повторно визуализирует все, что показано ниже, поэтому обновление данных на самом деле не требуется, поскольку это уже происходит. Не уверен, почему диаграмма отображается некорректно при обновлении страницы. Использование методов .clear() или .render() не работает.

<canvas id="myChart" height="100"></canvas>

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

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
labels: [
    @foreach($chart_data as $d)
        '{{ $d['date'] }}',
    @endforeach
],
datasets: [{ 
    data: [
        @foreach($chart_data as $d)
            {{ $d['score'] }},
        @endforeach
    ],

// ... rest of all the Chart config left out for readability

document.addEventListener("livewire:load", function(event) {
window.livewire.hook('afterDomUpdate', () => {

    var updatedLabels = [
        @foreach($chart_data as $d)
            '{{ $d['date'] }}',
        @endforeach
    ];

    var updatedData = [
        @foreach($chart_data as $d)
            {{ $d['score'] }},
        @endforeach
    ];

    myChart.data.labels.push(updatedLabels);
    myChart.data.datasets.forEach((dataset) => {
        dataset.data.push(updatedData);
    });

    myChart.update({
        duration: 800,
        easing: 'easeOutBounce'
    });

});
});
</script>