Uncaught TypeError: Chart is not a constructor when using Chart.js

Question

I'm working on my first Cordova projects and am trying to use Chart.js. The documentation states that Chart.js should be included like this:

<script src="Chart.js"></script>
<script>
    var myChart = new Chart({...})
</script>

I installed the library using bower and it is now present under www/lib/chart.js. Chrome gives me Failed to load resource: the server responded with a status of 404 when I'm loading Chart.js or lib/chart.js.

When I load lib/chart.js/src/chart.js I get a different error saying Uncaught TypeError: Chart is not a constructor in this line:

  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, { //...

This is what's in the file chart.js:

var Chart = require('./core/core.js')();

require('./core/core.helpers')(Chart);
// ...

window.Chart = module.exports = Chart;

Is this the right chart.js file?

Thanks in advance for any help!

Answer 1

I think that chart.js you're using has an error
try this one:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

Answer 2

Do this and it should work import Chart from 'chart.js/auto';

https://www.chartjs.org/docs/latest/getting-started/integration.html

Answer 3

On Laravel mix use:

window.Chart = require('chart.js/auto').default;