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?

Bicycle

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>

Hydroxylamine

That works fine for me, thanks! Any idea on how to use the local jar? – Bicycle

<script src="cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/…> also works and is a newer version – Golly

Answer 2

On Laravel mix use:

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

Handtohand

Answer 3

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

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

Vadavaden

Answer 4

If you are using Chart.js v3 or higher:

import Chart from 'chart.js/auto';

If you are using Chart.js v2:

import Chart from "chart.js";

Mur

Answer 5

Still ran into this with chartjs 4.4.3 and webpack. In the end, using the following worked:

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

instead of the documented:

import Chart from 'chart.js/auto'

Hayott