Node's Perpetuum Mobile

    chartjs-node

    1.7.1 • Public • Published

    Chartjs Node Header Image Build Status Code Climate

    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.

    Install

    npm i chartjs-node

    DownloadsWeekly Downloads

    274

    Version

    1.7.1

    License

    MIT

    Unpacked Size

    32.7 kB

    Total Files

    11

    Last publish

    Collaborators

    • sedouard