Skip to content
A node renderer for Chart.js using canvas.
Branch: master
Clone or download
Sean Sobey SAHL
Latest commit 7cd7d7f Feb 19, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.vscode Updated mocha sidebar settings Mar 25, 2018
dist Replaced canvas-prebuilt with latest canvas Feb 13, 2019
docker
src Replaced canvas-prebuilt with latest canvas Feb 13, 2019
.dockerignore docker integration Jun 22, 2018
.editorconfig
.gitignore Updated git and npm ignores Dec 6, 2018
.npmignore Updated git and npm ignores Dec 6, 2018
LICENSE
README.md Added some documentation for limitations Feb 19, 2019
docker-compose.override.yml
docker-compose.yml
mocha.opts Added mocha require source-map-support/register Mar 25, 2018
package-lock.json Replaced canvas-prebuilt with latest canvas Feb 13, 2019
package.json
tsconfig.json
tslint.json

README.md

chartjs-node-canvas

CircleCI NPM

A node renderer for Chart.js using canvas.

Provides and alternative to chartjs-node that does not require jsdom (or the global variables that this requires) and allows chartJS as a peer dependency, so you can manage its version yourself.

Installation

npm i chartjs-node-canvas

Features

  • Supports all Chart JS features and charts.
  • No heavy DOM virtualization libraries, thanks to a pull request to chart.js allowing it to run natively on node, requiring only a Canvas API.
  • Chart JS is a peer dependency, so you can bump and manage it yourself.
  • Provides a callback with the global ChartJS variable, so you can use the Global Configuration.
  • Uses fresh-require for each instance of CanvasRenderService, so you can mutate the ChartJS global variable seperatly within each instance.

Limitations

Animations

Chart animation (and responsive resize) is disabled by this library. This is necessary since the animation API's required are not available in node/canvas (this is not a browser environment after all).

This is the same as:

Chart.defaults.global.animation = false;
Chart.defaults.global.responsive = false;

Usage

const { CanvasRenderService } = require('chartjs-node-canvas');

(async () => {
    const width = 400; //px
    const height = 400; //px
    const configuration = {
        ... // See https://www.chartjs.org/docs/latest/configuration
    };
    const canvasRenderService = new CanvasRenderService(width, height, (ChartJS) => {
        // See https://www.chartjs.org/docs/latest/configuration/#global-configuration
        ChartJS.defaults.global.responsive = true;
    });
    const image = await canvasRenderService.renderToBuffer(configuration);
    const dataUrl = await canvasRenderService.renderToDataURL(configuration); // image/png
    const stream = canvasRenderService.renderToStream(configuration);
})();

Full Example

const { CanvasRenderService } = require('chartjs-node-canvas');

const width = 400;
const height = 400;
const configuration = {
    type: 'bar',
    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,
                    callback: (value: number) => '$' + value
                } as any
            }]
        }
    }
};
const chartCallback = (ChartJS) => {

    ChartJS.defaults.global.responsive = true;
    ChartJS.defaults.global.maintainAspectRatio = false;
};

(async () => {
    const canvasRenderService = new CanvasRenderService(width, height, chartCallback);
    const image = await canvasRenderService.renderToBuffer(configuration);
    const dataUrl = await canvasRenderService.renderToDataURL(configuration);
    const stream = canvasRenderService.renderToStream(configuration);
})();
You can’t perform that action at this time.