chartjs-node: CanvasGradient is not defined

I’m using chartjs-node to create a chart and send it in a nodejs Discord bot.

const chartNode = new ChartjsNode(300, 300);
chartNode.drawChart({
	type: 'line',
	data: {
		datasets: [{
			label: 'Ping',
			data: message.client.pings
		}]
	},
	options: {}
})
.then(() => {
	return chartNode.getImageBuffer('image/png');
}).then(stream => {
	message.channel.send({ files: [{ attachment: stream }] }).then(() => {
		chartNode.destroy();
	});
});

message.client.pings is an array of 3 numbers. The graph works fine with 1 and 2 numbers but once it gets 3 it errors with Unhandled rejection ReferenceError: CanvasGradient is not defined

Here is the whole error

1|martin   | Unhandled rejection ReferenceError: CanvasGradient is not defined
1|martin   |     at helpers.color (/home/kye/apps/martin-discord-bot/node_modules/chart.js/src/core/core.helpers.js:927:25)
1|martin   |     at ChartElement.draw (/home/kye/apps/martin-discord-bot/node_modules/chart.js/src/elements/element.point.js:93:23)
1|martin   |     at ChartElement.draw (/home/kye/apps/martin-discord-bot/node_modules/chart.js/src/controllers/controller.line.js:298:15)
1|martin   |     at Chart.drawDataset (/home/kye/apps/martin-discord-bot/node_modules/chart.js/src/core/core.controller.js:573:20)
1|martin   |     at Chart.drawDatasets (/home/kye/apps/martin-discord-bot/node_modules/chart.js/src/core/core.controller.js:548:9)
1|martin   |     at Chart.draw (/home/kye/apps/martin-discord-bot/node_modules/chart.js/src/core/core.controller.js:510:7)
1|martin   |     at Chart.render (/home/kye/apps/martin-discord-bot/node_modules/chart.js/src/core/core.controller.js:477:8)
1|martin   |     at Chart.update (/home/kye/apps/martin-discord-bot/node_modules/chart.js/src/core/core.controller.js:375:8)
1|martin   |     at Chart.construct (/home/kye/apps/martin-discord-bot/node_modules/chart.js/src/core/core.controller.js:121:7)
1|martin   |     at new Chart (/home/kye/apps/martin-discord-bot/node_modules/chart.js/src/core/core.js:7:8)
1|martin   |     at jsdom.envAsync.then.window (/home/kye/apps/martin-discord-bot/node_modules/chartjs-node/index.js:80:31)
1|martin   |     at tryCatcher (/home/kye/apps/martin-discord-bot/node_modules/bluebird/js/release/util.js:16:23)
1|martin   |     at Promise._settlePromiseFromHandler (/home/kye/apps/martin-discord-bot/node_modules/bluebird/js/release/promise.js:512:31)
1|martin   |     at Promise._settlePromise (/home/kye/apps/martin-discord-bot/node_modules/bluebird/js/release/promise.js:569:18)
1|martin   |     at Promise._settlePromise0 (/home/kye/apps/martin-discord-bot/node_modules/bluebird/js/release/promise.js:614:10)
1|martin   |     at Promise._settlePromises (/home/kye/apps/martin-discord-bot/node_modules/bluebird/js/release/promise.js:693:18)```

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 15 (4 by maintainers)

Most upvoted comments

Fixed on my side just by declaring after my import:

if (global.CanvasGradient === undefined) {
  global.CanvasGradient = function() {};
}

Will make it pass the instanceof check.

lingz on Dec 29, 2017

I agree. The fact that the demo site had no problem tells me it is an OS specific issue. (The demo site is running Ubuntu). Going to close this out.

sedouard on Aug 4, 2017

I have the same issue on Ubuntu and I have solved it taking care of the length for the chartConfig.data.labels. It has to match at least the datasets[…].data length.

BlackJohnny on Sep 12, 2017

+1 I get the same issue On line 81 of chart.js/src/elements/element.point.js, (chartArea.right*errMargin < model.x) I get a trigger that this evaluates to true on some occasions (not all), in which line 93 ctx.strokeStyle = color(ctx.strokeStyle).alpha(ratio).rgbString(); Calls chart.js/src/core/core.helpers.js where if (value instanceof CanvasGradient) { is undefined.

I solved the problem temporarily by commenting out line 927 and 929 of core.helpers.js to bypass this problem for now.

SeanLMcCullough on Jul 28, 2017

Not complaining, just seems like something that could be resolved in the source!

joemccann on Sep 9, 2018

@lingz solution works, but feels hacky. Is there a cleaner solution in the source code itself?

joemccann on Sep 9, 2018