How to use Chart.js in Nodejs?

Question

How to create a pie chart using NodeJs with chartjs? want to create different types of charts using chartjs but when I tried to run the code shows "cannot set the property of width"

TypeError: Cannot set property 'width' of undefined
    at ni.resize (node_modules\chart.js\dist\Chart.min.js:7:93312)
    at ni.initialize (node_modules\chart.js\dist\Chart.min.js:7:92818)
    at ni.construct (node_modules\chart.js\dist\Chart.min.js:7:92559)
    at new ni (node_modules\chart.js\dist\Chart.min.js:7:91964)
    at Object.<anonymous> (chartjs\chart.js:7:15)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)

I tried to run this code to produce a pie chart image but found this error.

let Canvas = require("canvas"),
  canvas = Canvas.createCanvas(400, 400),
  ctx = canvas.getContext("2d"),
  Chart = require('chart.js'),
  fs = require("fs");

var myChart = new Chart(ctx, {
  type: "pie",
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
      {
        label: "# of Votes",
        data: [12, 19, 3, 5, 2, 3],
        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: {
            beginAtZero: true
          }
        }
      ]
    }
  }
});

canvas.toBuffer(function(err, buf) {
  if (err) throw err;
  fs.writeFileSync("chart.png", buf);
});

Should be an image in the current folder

Answer 1

I suggest using ChartJS for Node: https://www.npmjs.com/package/chartjs-node

It draws a chart which you can then save to the file system and insert accordingly.

Here's a snippet of code as an example:

import * as ChartjsNode from 'chartjs-node'; // Import the library

const chartNode = new ChartjsNode(600, 600); // Create an instance with dimensions

const barGraphOptions = {
  type: 'bar',
  data: []
};

// Draw the chart and write the file to the file system
await new Promise(resolve => {
  chartNode
    .drawChart(barGraphOptions)
    .then(() => {
      chartNode.getImageBuffer('image/png');
    })
    .then(() => {
      chartNode.writeImageToFile('image/png', 'some_file.png').then(() => {
        resolve();
      });
    })
    .catch(e => {
      console.log('Caught', e);
    });
});