Chartjs Node Save

Create Chart.js Charts Server-side

Project README

Chartjs Node Header Image Build Status Code Climate


A simple library to make it easy to create Chartjs charts in Node.js (server-side).

This library puts together jsdom, node-canvas and chartjs to render Chartjs on the server.

Live Demo

Getting Started

Peer Dependencies

You'll need to npm install chart.js. This library will pick up the exact version you end up installing.


Before installing this library you'll need to install Cairo for your system. The instructions for the most common platforms can be found here.

Now you're ready to install the package:

npm install chartjs-node

Creating a Chart

const ChartjsNode = require('chartjs-node');
// 600x600 canvas size
var chartNode = new ChartjsNode(600, 600);
return chartNode.drawChart(chartJsOptions)
.then(() => {
    // chart is created

    // get image as png buffer
    return chartNode.getImageBuffer('image/png');
.then(buffer => {
    Array.isArray(buffer) // => true
    // as a stream
    return chartNode.getImageStream('image/png');
.then(streamResult => {
    // using the length property you can do things like
    // directly upload the image to s3 by using the
    // stream and length properties // => Stream object
    streamResult.length // => Integer length of stream
    // write to a file
    return chartNode.writeImageToFile('image/png', './testimage.png');
.then(() => {
    // chart is now written to the file path
    // ./testimage.png

Destroying the Chart

Each time you create a chart, you will create a new virtual browser window. You should call the destroy method to release the native resources or you may leak memory:


Global chart reference

You can access and modify the ChartJS reference before a chart is drawn via an event (beforeDraw). ChartjsNode extends EventEmitter.

var chartNode = new ChartjsNode(600, 600);
chartNode.on('beforeDraw', function (Chartjs) {
chartNode.drawChart(chartJsOptions)	//beforeDraw is called in here

Adding draw plugins

To use draw plugins, simply use the options object to add your plugins, like so:

var myChartOptions = {
    plugins: {
        afterDraw: function (chart, easing) {
            var self = chart.config;    /* Configuration object containing type, data, options */
            var ctx = chart.chart.ctx;  /* Canvas context used to draw with */

var chartJsOptions = {
    type: 'pie',
    data: myChartData,
    options: myChartOptions

Read here to see what plugins you can write. In the context of drawing static images, beforeDraw and/or afterDraw methods makes most sense to implement.

Read here to see which methods are available for the ctx object.

Adding custom charts

To use custom charts, also use the options object to add your chart config and controller, like so:

var myChartOptions = {
  charts: [{
    type: 'custom',
    baseType: 'bar',
    controller: {
     draw: function (ease) {},
    defaults: {

var chartJsOptions = {
    type: 'custom',
    data: myChartData,
    options: myChartOptions

Read here to see how to write custom charts.

Open Source Agenda is not affiliated with "Chartjs Node" Project. README Source: vmpowerio/chartjs-node
Open Issues
Last Commit
2 years ago

Open Source Agenda Badge

Open Source Agenda Rating