CODEWITHSUNDEEP
node.jschart.js
wBB
wBB

Reputation: 851

ChartJS on NodeJS: error Chart is not defined

I'm trying to use ChartJS on NodeJS, but it doesn't work. I installed with npm install chart.js --save and I created the simplest possible test as indicated below, but error Chart is not defined displayed. I've already tried to copy the file "chart.js" to the same directory, I've already tried to point to the node_modules/chart.js/.... directory, but I can't make it work. Also I can't point the file https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js, because system should work" stand alone "

<html>

<head>
    <script src="chart.js"></script>
</head>

<body>

    <canvas id="mycanvas" width="400" height="400"></canvas>

    <script>
        var chrt = document.getElementById("mycanvas").getContext("2d");
        var data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul"],
            datasets: [{
                label: "My First dataset",
                fillColor: "rgba(220,220,220,0.8)",
                strokeColor: "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data: [65, 59, 80, 81, 56, 55, 40]
            }]
        };
        var myFirstChart = new Chart(chrt).Bar(data);
    </script>

</body>

</html>

What is wrong?

Upvotes: 0

Views: 3200

Answers (3)

Tony H.
Tony H.

Reputation: 1975

You might want to avoid referencing your modules in your front-end files. Instead consider creating a route for your module files and then reference the route in your front-end files.

Example:

index.html

<script src="/bootstrap.min.js"></script>

app.js

app.get('/bootstrap.min.js', function(req, res) {
    res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');
});

For more specifics please see this great answer courtesy of @jfriend00 How to include scripts located inside the node_modules folder?

Upvotes: 0

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32879

There is nothing wrong with the way you are importing the chart library. It should work this way (as long as everything is set correctly) :

...
<script src="chart.js"></script>
...

However, the actual issue might occur, because of the syntax you are using to construct the chart.

When you install Chart.js module using npm install chart.js --save, it installs the latest version of Chart.js (which is at the moment 2.6), but you are using old syntax (which is for v1.x) while creating the chart.

Here is the correct syntax for creating a chart in Chart.js version 2.6 :

...
var chrt = document.getElementById("mycanvas").getContext("2d");
var data = {
   labels: ["Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul"],
   datasets: [{
      label: "My First dataset",
      backgroundColor: "rgba(220,220,220,0.8)",
      borderColor: "rgba(220,220,220,0.8)",
      hoverBackgroundColor: "rgba(220,220,220,0.75)",
      hoverBorderColor: "rgba(220,220,220,1)",
      data: [65, 59, 80, 81, 56, 55, 40]
   }]
};
var myFirstChart = new Chart(chrt, {
   type: 'bar',
   data: data
});
...

Upvotes: 2

Natsathorn
Natsathorn

Reputation: 1528

I'm not so sure that you are using framework or not but I try npm install chart.js then create index.html in the same level with node_modules. Then I import it like this.

<script src="./node_modules/chart.js/dist/Chart.js"></script>

Work fine ,please try and if it not work please provide some more details.

Upvotes: 0

Related Questions