Not understanding why chart js wont load

Question

Chart JS 3.9.1
Laravel 9.x

There are 50 thousand questions using 20 different versions and none of them, from what I have found are helpful. I have checked the version, checked the docs, and even checked the page source to see if data was in place. No Errors, No Chart, Nothing.

In a blade file I have done:

<div>
    <canvas id="item-listing-data" width="400" height="400"></canvas>
</div>

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>

        const ctx    = document.getElementById('item-listing-data').getContext('2d');

        const saleDataChart = new Chart(ctx, {
            type: 'line',
            labels: @json($saleData['labels']),
            datasets: [{
                label: 'Sale Data',
                data: @json($saleData['data']),
                fill: false,
                borderColor: 'rgb(34, 67, 156)',
                tension: 0.1
            }]
        });
    </script>
@endpush

As far as I know, from the docs this is what you do. This is how you render the chart.

If I inspect the page to see the JS that gets spit out:

const ctx    = document.getElementById('item-listing-data');

const saleDataChart = new Chart(ctx, {
    type: 'line',
    labels: ["Mon Aug 2022 14:08:13"],
    datasets: [{
        label: 'Sale Data',
        data: [10000],
        fill: false,
        borderColor: 'rgb(34, 67, 156)',
        tension: 0.1
    }]
});

Looks right to me.

When I investigate the page I see a div that is way too large, the canvas element - but Im sure that can be fixed with options, and no chart. Just an empty canvas.

Again, I know this question has been asked a thousand times, but I:

Followed the docs
Checked for issues in my code
Made sure I was loading the correct version of chart js

And still no chart, no errors, nothing.

Even if I replace labels and data with [1,2,3] - Nothing, no chart, no errors.

Thoughts?

Dunno if it's a typo, but in your JS output the `.getContext('2d')` call is missing. — David, Aug 23 '22 at 14:51
wrap the const ctx and const salesdatachart in a document ready. — Cameron, Aug 23 '22 at 14:56
@David I did have that, but I had the same issue, so the example In posted was with out it. The docs seem to say it can be with or without. — TheWebs, Aug 23 '22 at 14:59
@Cameron A `document.addEventListener("DOMContentLoaded", function() { .. })` did not solve the issue, https://stackoverflow.com/a/21814964/1270259 — TheWebs, Aug 23 '22 at 15:01

score 2 · Accepted Answer · answered Aug 23 '22 at 15:05

AFA I can see, the issue seems to be in the chart configuration and the data node is missing. Without it, the chart doesn't have data to show.

The code should be:

<div>
    <canvas id="item-listing-data" width="400" height="400"></canvas>
</div>

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>

        const ctx    = document.getElementById('item-listing-data').getContext('2d');

        const saleDataChart = new Chart(ctx, {
            type: 'line',
            data: { // <--- this was missing
              labels: @json($saleData['labels']),
              datasets: [{
                  label: 'Sale Data',
                  data: @json($saleData['data']),
                  fill: false,
                  borderColor: 'rgb(34, 67, 156)',
                  tension: 0.1
              }]
            }
          });
    </script>
@endpush

Wow ..... And here I thought I read the documentation properly. Christ. Thank you good person for your help. This solved my issue. Key lesson: Learn to read LOL. — TheWebs, Aug 23 '22 at 15:11

Not understanding why chart js wont load

1 Answers1