I'm using chartjs-node-canvas with chartjs to render a graph config as an image, so after installing it I tried the following :

import { ChartJSNodeCanvas } from 'chartjs-node-canvas';
const chartCallback = (ChartJS) => {
  ChartJS.defaults.global.elements.rectangle.borderWidth = 2;
};
const canvasRenderService = new ChartJSNodeCanvas({
  width,
  height,
  chartCallback,
});

But I get the following error when I'm creating a new ChartJSNodeCanvas :

Error: Cannot find module 'canvas'
at Function.webpackEmptyContext [as resolve] (http://localhost:4200/main.js:131373:10)
at freshRequire (http://localhost:4200/main.js:21530:69)
at new ChartJSNodeCanvas (http://localhost:4200/main.js:21592:50)
at ChartImageService._callee2$ (http://localhost:4200/main.js:127066:39)
at tryCatch (http://localhost:4200/main.js:115133:17)
at Generator.invoke [as _invoke] (http://localhost:4200/main.js:115347:22)
at Generator.next (http://localhost:4200/main.js:115185:21)
at http://localhost:4200/main.js:127002:67
at new ZoneAwarePromise (http://localhost:4200/polyfills.js:7278:21)
at __awaiter (http://localhost:4200/main.js:126981:10) {code: 'MODULE_NOT_FOUND', stack: 'Error: Cannot find module 'canvas'
at Fun…ter (http://localhost:4200/main.js:126981:10)', message: 'Cannot find module 'canvas''}

I tried to npm install again, npm rebuild, delete package-lock.json... but it doesn't work. Any ideas ?

I'm using Angular with Electronjs

I'm using chartjs-node-canvas with chartjs to render a graph config as an image, so after installing it I tried the following :

import { ChartJSNodeCanvas } from 'chartjs-node-canvas';
const chartCallback = (ChartJS) => {
  ChartJS.defaults.global.elements.rectangle.borderWidth = 2;
};
const canvasRenderService = new ChartJSNodeCanvas({
  width,
  height,
  chartCallback,
});

But I get the following error when I'm creating a new ChartJSNodeCanvas :

Error: Cannot find module 'canvas'
at Function.webpackEmptyContext [as resolve] (http://localhost:4200/main.js:131373:10)
at freshRequire (http://localhost:4200/main.js:21530:69)
at new ChartJSNodeCanvas (http://localhost:4200/main.js:21592:50)
at ChartImageService._callee2$ (http://localhost:4200/main.js:127066:39)
at tryCatch (http://localhost:4200/main.js:115133:17)
at Generator.invoke [as _invoke] (http://localhost:4200/main.js:115347:22)
at Generator.next (http://localhost:4200/main.js:115185:21)
at http://localhost:4200/main.js:127002:67
at new ZoneAwarePromise (http://localhost:4200/polyfills.js:7278:21)
at __awaiter (http://localhost:4200/main.js:126981:10) {code: 'MODULE_NOT_FOUND', stack: 'Error: Cannot find module 'canvas'
at Fun…ter (http://localhost:4200/main.js:126981:10)', message: 'Cannot find module 'canvas''}

I tried to npm install again, npm rebuild, delete package-lock.json... but it doesn't work. Any ideas ?

I'm using Angular with Electronjs

• javascript
• node.js
• angular
• chart.js

• try npm rebuild as mentioned by @uminder – subodhkalika Commented Jun 30, 2022 at 5:04

3 Answers 3

On https://www.npmjs./package/chartjs-node-canvas, there's the following note:

Node JS version

This is limited by the upstream dependency canvas.

Therefore, your problem should be solved if you run the following mands:

npm install canvas
npm rebuild

open New terminal and write npm mand to install module which is chartjs-node-canvas

npm install canvas 
npm install chartjs-node-canvas

I made a blank canvas module, it seems to work.

1. Edit package.json:

  "dependencies": {
    "canvas": "file:./src/lib/canvas",
    "jsdom": "^21.1.1",

2. Create a directory canvas in that path and index.ts/js with:

module.exports = {};

2. npm i
3. Run the app.

The solution originates from here.