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

constChartjsNode=require('chartjs-node');// 600x600 canvas sizevarchartNode=newChartjsNode(600,600);returnchartNode.drawChart(chartJsOptions).then(()=>{// chart is created// get image as png bufferreturnchartNode.getImageBuffer('image/png');}).then(buffer=>{Array.isArray(buffer)// => true// as a streamreturnchartNode.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 propertiesstreamResult.stream// => Stream objectstreamResult.length// => Integer length of stream// write to a filereturnchartNode.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.

varchartNode=newChartjsNode(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:

varmyChartOptions={plugins: {afterDraw: function(chart,easing){varself=chart.config;/* Configuration object containing type, data, options */varctx=chart.chart.ctx;/* Canvas context used to draw with */
...
}}}varchartJsOptions={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:

varmyChartOptions={charts: [{type: 'custom',baseType: 'bar',controller: {draw: function(ease){},
...
},defaults: {
...
},}]}varchartJsOptions={type: 'custom',data: myChartData,options: myChartOptions};

Read here to see how to write custom charts.