laravel - データを更新した後の Chartjs の予期しないサイズ変更とトリミング。laravel ブレード ビューと Livewire の使用

Question

私のチャートは、最初に以下に示すコードを介して読み込まれます。これはうまくいきます。

次に、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>