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

Possible duplicate of How to create charts using NodeJS?

Sushant Paudel
– Sushant Paudel

2019-10-03 10:11:01 +00:00
Commented Oct 3, 2019 at 10:11 — Sushant Paudel
– Sushant Paudel, Commented Oct 3, 2019 at 10:11

Taylor LaMar · Accepted Answer · 2020-11-04 22:49:34Z

2

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);
    });
});

answered Nov 4, 2020 at 22:49

Taylor LaMar

752 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ggorlen Over a year ago

What is the explicit promise construction antipattern and how do I avoid it?. Also, this is confusing because there's nothing returned by the then blocks, so they aren't awaiting anything.

Sushant Paudel · Accepted Answer · 2019-10-03 10:10:18Z

1

ChartJS is an HTML5 based file which is used in front-end development only. For more information visit this site.

You can refer to this answer if you want to use nodejs to create Charts.

P.S. This question is duplicate to this

answered Oct 3, 2019 at 10:10

Sushant Paudel

10614 bronze badges

2 Comments

ggorlen Over a year ago

It's not really a duplicate--the other question asks how to draw charts in Node, while this one asks how to use chart.js specifically.

Sushant Paudel Over a year ago

@ggorlen The answer is already in this. The question is not exactly the same but, the implementation is same.

timray · Accepted Answer · 2020-06-04 09:59:58Z

I had the same issue as OP. I couldn't figure out a way to do it using the standard approach of combining Node Canvas and Chart.JS, but I found using ChartjsNodeCanvas works.

import { CanvasRenderService } from 'chartjs-node-canvas';

canvasRenderService: CanvasRenderService;

async createGraph(data: any) {

    const configuration = {
        type: 'bar',
        data: {
            labels: // Your labels,
            datasets: [
                data
            ]
        },
        options: {
           // Your options
        }
    };

    const canvasRenderService = new CanvasRenderService(300, 500);

    return await canvasRenderService.renderToDataURL(configuration);
    // or return canvasRenderService.renderToBuffer(configuration);
    // or return canvasRenderService.renderToStream(configuration);
}


await this.createGraph(data);

Note, ChartjsNodeCanvas requires ChartJS as a dependency.

Collectives™ on Stack Overflow

How to use Chart.js in Nodejs?

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related