chartjs-node

Chartjs-Node

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.

Cairo

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
    streamResult.stream // => 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:

chartNode.destroy();

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) {
	//Chartjs.defaults
	//Chartjs.pluginService
	//Chartjs.scaleService
	//Chartjs.layoutService
	//Chartjs.helpers
	//Chartjs.controllers
	//etc
});
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.