Error: Cannot find module 'canvas' - Chart.js

Question

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

One of the first things it says in the readme is "This is limited by the upstream dependency canvas.". Have you installed github.com/Automattic/node-canvas ? — nanobar
– nanobar, Commented Jun 24 at 3:48

uminder · Accepted Answer · 2022-06-30 05:02:10Z

3

On https://www.npmjs.com/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 commands:

npm install canvas
npm rebuild

edited Jun 30, 2022 at 5:02

answered Jun 30, 2022 at 4:43

uminder

26.4k6 gold badges45 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

subodhkalika Over a year ago

canvas is an internal dependency on 'chartjs-node-canvas' package right? Why do we need to install as the project's dependency?

uminder Over a year ago

@subodhkalika: Unfortunately I don't know why this is required.

Jeremy Thompson Apr 11 at 3:00

@subodhkalika see my answer.

Akash Tripathi · Accepted Answer · 2022-06-30 05:03:45Z

1

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

npm install canvas 
npm install chartjs-node-canvas

answered Jun 30, 2022 at 5:03

Akash Tripathi

296 bronze badges

Comments

funerr · Accepted Answer · 2023-03-21 05:10:38Z

1

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

Edit package.json:

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

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

module.exports = {};

npm i
Run the app.

The solution originates from here.

answered Mar 21, 2023 at 5:10

funerr

8,31417 gold badges91 silver badges139 bronze badges

Comments

halfer · Accepted Answer · 2025-06-23 20:49:17Z

0

Double check it's actually been installed; if you get errors on a simple declaration line then it's likely a failed install:

const { createCanvas, loadImage } = require('canvas');

I kept on getting errors when installing the package to do with existing dependencies. It turns out I was hitting a peer dependency conflict, but it’s unrelated to canvas. What's happening is that when I try to install canvas, npm tries to re-resolve my full dependency tree, and it’s failing due to a version mismatch between packages.

To resolve it I installed this way:

npm install canvas --legacy-peer-deps

edited Jun 23 at 20:49

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered Apr 11 at 2:58

Jeremy Thompson

66.3k38 gold badges225 silver badges344 bronze badges

Collectives™ on Stack Overflow

Error: Cannot find module 'canvas' - Chart.js

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related