Data is generated like so:

$repResults[] = [
    'label' => (new \Carbon\Carbon($wbwResult->created_at))->isoFormat('DD-MM-YY'),
    'data' => [
        # datatype cast to int to prevent {!! xss !!}
        (int) $wbwResult->discipline_three,
        (int) $wbwResult->discipline_four,
        (int) $wbwResult->discipline_five,
        (int) $wbwResult->discipline_six,
    ]
];

I am then trying to output the data as a line chart:

<canvas id="myChart" width="400" height="400"></canvas>
<script src='https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js'></script>
<script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'line',
        labels: ['A', 'B', 'C', 'D'],
        datasets: {!! json_encode($wbw['reps']) !!},
        options: {
            responsive: true
        }
    });
</script>

The chart does not render anything, nor do I get any errors in my console. Any ideas what I'm doing wrong?

The data looks like this:

[{"label":"28-11-21","data":[22,70,50,27]},{"label":"28-11-21","data":[7,7,7,7]}]