0

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?

Talha Awan
  • 4,573
  • 4
  • 25
  • 40
wBB
  • 821
  • 1
  • 18
  • 39

3 Answers3

2

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
});
...
ɢʀᴜɴᴛ
  • 32,025
  • 15
  • 116
  • 110
  • 1
    Cool!! Now is working!!!! As you said @ℊααnd, it was only incorrect syntax. There's one thing I've not yet figured out: Why system can't find the file `./node_modules/chart.js/dist/Chart.js`? To make it work it was necessary to copy this file to my `/javascripts` directory. If there is another way better than that, I would like to know how to do. Thank you! – wBB Jul 29 '17 at 22:27
  • 1
    A tip about this new version, which is in "chartjs.org": By default the chart is self-adjusting to the window, so to prevent this, just put the "canvas object" in a `div` tag, as shown here: http://www.chartjs.org/docs/latest/general/responsive.html – wBB Jul 29 '17 at 22:28
  • 1
    TRY - `../node_modules/chart.js/dist/Chart.js` – ɢʀᴜɴᴛ Jul 29 '17 at 22:43
  • I've already tried using the real path, but nothing works. The only way it works is by copying the file to a separate directory. – wBB Jul 29 '17 at 23:17
0

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.

Natsathorn
  • 1,530
  • 1
  • 12
  • 26
  • I've tried this but it also didn't work. I've already copied the `/dist/Chart.js` file to a separate directory and then it gives another error: `(intermediate value).Bar is not a function` – wBB Jul 29 '17 at 21:13
0

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?

Tony H.
  • 1,975
  • 4
  • 14
  • 20