Html

<div class="chart-container" style="height:315px">
  <canvas id="test"></canvas>
</div>

I've included these files

<script src="/assets/vendors/jquery/dist/jquery.min.js"></script>
<script src=".js/2.24.0/moment.min.js"></script>
<script src=".js/2.8.0/Chart.min.js" type="text/javascript"></script>
<script src="/assets/js/test.js"></script>

test.js

$(document).ready(function() {
  var ctx = document.getElementById('test').getContext('2d');
  var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
              label: '# of Votes',
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
              }]
          }
      }
  });
});

I used the sample code from / for test.js. I'm also using laravel if that could have something to do with it.

Here's the error I'm getting.

Chart.min.js:7 Uncaught TypeError: Cannot read property 'fontSize' of undefined at Object._parseFont (Chart.min.js:7) at i.fit (Chart.min.js:7) at i.update (Chart.min.js:7) at Chart.min.js:7 at Object.each (Chart.min.js:7) at Object.update (Chart.min.js:7) at ni.updateLayout (Chart.min.js:7) at ni.update (Chart.min.js:7) at ni.construct (Chart.min.js:7) at new ni (Chart.min.js:7)

EDIT

Removing $(document).ready() fixed the problem

Html

<div class="chart-container" style="height:315px">
  <canvas id="test"></canvas>
</div>

I've included these files

<script src="/assets/vendors/jquery/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.8.0/Chart.min.js" type="text/javascript"></script>
<script src="/assets/js/test.js"></script>

test.js

$(document).ready(function() {
  var ctx = document.getElementById('test').getContext('2d');
  var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
              label: '# of Votes',
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
              }]
          }
      }
  });
});

I used the sample code from https://www.chartjs/docs/latest/ for test.js. I'm also using laravel if that could have something to do with it.

Here's the error I'm getting.

Chart.min.js:7 Uncaught TypeError: Cannot read property 'fontSize' of undefined at Object._parseFont (Chart.min.js:7) at i.fit (Chart.min.js:7) at i.update (Chart.min.js:7) at Chart.min.js:7 at Object.each (Chart.min.js:7) at Object.update (Chart.min.js:7) at ni.updateLayout (Chart.min.js:7) at ni.update (Chart.min.js:7) at ni.construct (Chart.min.js:7) at new ni (Chart.min.js:7)

EDIT

Removing $(document).ready() fixed the problem

• javascript
• html
• laravel
• charts
• chart.js

Share Improve this question Follow edited Jan 1, 2021 at 11:23 Soviut 91.9k5353 gold badges209209 silver badges283283 bronze badges asked Aug 22, 2019 at 11:36 J. DoeJ. Doe 32755 silver badges1616 bronze badges 2

• 2 Is it because of how you've imported jquery? perhaps change the src to https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js – Matt Ellen Commented Aug 22, 2019 at 11:43
• I changed jquery, and that seems to do the trick. The graphs are now displaying. I was using jquery 2.2.4. – J. Doe Commented Aug 22, 2019 at 11:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

Please check this example jquery 2.2.4

// find elements
var ctx = document.getElementById('myChart');
var ctx = document.getElementById('myChart').getContext('2d');
var ctx = $('#myChart');
var ctx = 'myChart';
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas> 

<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.8.0/Chart.min.js" type="text/javascript"></script>

It works perfectly fine if you properly source the jQuery library. Check here https://jsfiddle/g7qmh8wL/1/

// no code changes required.