How can I configure Chart.js in a Electron app?

Question

I'm new to electron so I'm learning the basic configuration.

So, i want to implement chart.js in my electron app. The problem is: on my main page, the chart is simply a blank space... but with a look in the html inspector I can see the canvas created.

What I already did:

I've installed chart.js with npm install chart.js --save which we can find in the official chart.js documentation (https://www.chartjs.org/docs/latest/getting-started/installation.html).

My feeling tells me that I'm doing something wrong in the call for the chart library or something like that. My code is below:

As you can see, I'm using the official example. The only addition was the const { chart } = require('electron-chartjs');. So, I believe I'm doing something wrong or ignoring some big step.

user_14044554 · Answer

Update:

Here is the new code:

I had to require "chart.js", but i was requiring "electron-chart,js". And the canvas id was wrong.

Admin · Answer

Notice the placeholder {{chartData}}. Also do note that you have to substitute in the actual script from the Chart.js file (you could link to the script file, but then you'll need a module that serves up static files)

var http = require('http');
var fs = require('fs');

http.createServer(function (req, response) {
    fs.readFile('index.html', 'utf-8', function (err, data) {
        response.writeHead(200, { 'Content-Type': 'text/html' });

        var chartData = [];
        for (var i = 0; i < 7; i++)
            chartData.push(Math.random() * 50);

        var result = data.replace('{{chartData}}', JSON.stringify(chartData));
        response.write(result);
        response.end();
    });
}).listen(1337, '127.0.0.1');

console.log('Server running at http://127.0.0.1:1337/');

We just substitute the placeholder with actual data.

How can I configure Chart.js in a Electron app?

2 Answers