Blank charts on the second call

[chalomsuperlogica]

Thanks for the great package!

I'm trying to run chartjs-node-canvas over express. The graph is rendered correctly on the first time I access the URL, but is blank on the second and subsequent calls. A minimal working example would be:

const express = require("express")
const { CanvasRenderService } = require('chartjs-node-canvas');
let app = express()

const configuration = {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19],
            backgroundColor: [
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ]
        }]
    }
};

const mkChart = async (params) => {
    const canvasRenderService = new CanvasRenderService(800, 800)
    return await canvasRenderService.renderToBuffer(configuration);
}
    
app.get('/chart', async function (req, res) {
        var image = await mkChart(req.query)
        res.type("image/png")
        res.send(image) 
})

app.listen(3061, () => {
})

[SeanSobey]

Yeah there is something strange going on here, but it can be resolved by making the config a local variable:

app.get('/chart', async (req, res, next) => {
	try {
		const canvasRenderService = new CanvasRenderService(800, 800);
		const image = await canvasRenderService.renderToBuffer({
			type: 'bar',
			data: {
				labels: ['Red', 'Blue'],
				datasets: [{
					label: '# of Votes',
					data: [12, 19],
					backgroundColor: [
						'rgba(153, 102, 255, 0.2)',
						'rgba(255, 159, 64, 0.2)'
					]
				}]
			}
		});
		res.type('image/png');
		res.send(image);
	} catch (error) {
		next(error);
	}
});

Which is how an app would most likely use this package.

Interesting, and more confusingly, persistenting the CanvasRenderService also fixes the issue:

const canvasRenderService = new CanvasRenderService(800, 800);
const config = {
	type: 'bar',
	data: {
		labels: ['Red', 'Blue'],
		datasets: [{
			label: '# of Votes',
			data: [12, 19],
			backgroundColor: [
				'rgba(153, 102, 255, 0.2)',
				'rgba(255, 159, 64, 0.2)'
			]
		}]
	}
};

app.get('/chart', async (req, res, next) => {
	try {
		const image = await canvasRenderService.renderToBuffer(config);
		res.type('image/png');
		res.send(image);
	} catch (error) {
		next(error);
	}
});

As does persisting the chartJS instance:

const chartjs = require('chart.js');

const config = {
	type: 'bar',
	data: {
		labels: ['Red', 'Blue'],
		datasets: [{
			label: '# of Votes',
			data: [12, 19],
			backgroundColor: [
				'rgba(153, 102, 255, 0.2)',
				'rgba(255, 159, 64, 0.2)'
			]
		}]
	}
};

app.get('/chart', async (_req, res, next) => {
	try {
		const canvasRenderService = new CanvasRenderService(800, 800, undefined, undefined, () => chartjs);
		const image = await canvasRenderService.renderToBuffer(config);
		res.type('image/png');
		res.send(image);
	} catch (error) {
		next(error);
	}
});

No idea what is actually going on but my guess is that some internals of ChartJS combined with the fact that this package is using 'fresh-require' for each CanvasRenderService to get the chart.js module is causing the reference to the config / datasets-> data to get lost... ¯\_(ツ)_/¯

Not the answer I would like to give, but hopefully one of the above solutions helps avoid this issue for you.

[chalomsuperlogica]

This indeed solved the problem. I have no idea why it works, but it works 👍

[neo125874]

thanks for this lib, too.
It saved my day when I was struggling with other server-side render package.