[Chartjs]-Creating chart.js chart directly to PNG in Node js?

by

9👍

✅

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

7👍

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).

6👍

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

3👍

You can create image from Canvas using toDataURL, so after charts.js renders the graph into the canvas (myChart)

var canvas = document.getElementById('myChart');
var dataURL = canvas.toDataURL();

dataURL will not contain the base64 string of the image. You can write it to file and use the file or use the string any other way.

Check that reference for converting the string to image file if you will.
https://gist.github.com/madhums/e749dca107e26d72b64d

Hope this is what you mean you needed to do.

Leave a comment