Creating chart.js chart directly to PNG in Node js?

Chart.js is built on the HTML5 canvas element.

To use it on node.js you need to mimic this element in node.

There is a package that try to handle all the needed libraries for this purpose, you can find it here chartjs-node

I had this problem and wound up building a web service that renders Chart.js charts as PNG images. I open sourced my work on this

The service is called QuickChart. For example, if your chart config is:

{
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [{
      label: 'Dogs',
      data: [ 50, 60, 70, 180, 190 ]
    }, {
      label: 'Cats',
      data: [ 100, 200, 300, 400, 500 ]
    }]
  }
}

You can embed the Chart.js config in the URL like so:

https://quickchart.io/chart?c={ type: 'bar', data: { labels: ['January', 'February', 'March', 'April', 'May'], datasets: [{ label: 'Dogs', data: [ 50, 60, 70, 180, 190 ] }, { label: 'Cats', data: [ 100, 200, 300, 400, 500 ] }] }}

...and it renders your chart as an image!

Note that for more complex charts, you'd want to URL encode the chart options.

There's an interactive editor on the QuickChart website which you can use to generate a URL for a given chart config. You may also view/fork the source code here (it's built on top of node-canvas and chartjs-node-canvas).

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

var configuration = {
    type: 'bar',
    data: {
        labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
        datasets: [{
                label: 'Scored',
                data: [2478,5267,734,784,433],
                        backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
    }]},
    options: {
        scales: {
            yAxes: [{
                ticks: {
                precision:0,
                beginAtZero: true
                }
            }]
        }
    }
}


const mkChart = async (params) => {
    const canvasRenderService = new CanvasRenderService(400, 400)
    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, () => {

})

Run the node script, and goto "http://localhost:3061/chart" which responses the chart png

Reference : https://www.npmjs.com/package/chartjs-node-canvas