Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
chartjs-node-canvas
Advanced tools
A Node JS 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.
npm i chartjs-node-canvas chart.js
This is limited by the upstream dependency canvas.
See the GitHub Actions yml section for the current supported Node version(s). You will need to do a npm rebuild
to rebuild the canvas binaries.
Currently supports 3.x.x. You are given the ability to maintain the version yourself via peer dependency, but be aware that going above the specified version might result in errors.
ChartJSNodeCanvas
, so you can mutate the ChartJS global variable separately within each instance.Chart animation (and responsive resize) is disabled by this library. This is necessary since the animation API's required are not available in Node JS/canvas-node (this is not a browser environment after all).
This is the same as:
Chart.defaults.animation = false;
Chart.defaults.responsive = false;
For some unknown reason canvas requires use of the sync API's to use SVG's or PDF's. This libraries which support these are:
You also need to set the canvas type when you initialize the ChartJSNodeCanvas
instance like the following:
const { ChartJSNodeCanvas } = require('chartjs-node-canvas');
const chartJSNodeCanvas = new ChartJSNodeCanvas({ type: 'svg', width: 800, height: 600 });
See the API docs.
const { ChartJSNodeCanvas } = require('chartjs-node-canvas');
const width = 400; //px
const height = 400; //px
const backgroundColour = 'white'; // Uses https://www.w3schools.com/tags/canvas_fillstyle.asp
const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, backgroundColour});
(async () => {
const configuration = {
... // See https://www.chartjs.org/docs/latest/configuration
};
const image = await chartJSNodeCanvas.renderToBuffer(configuration);
const dataUrl = await chartJSNodeCanvas.renderToDataURL(configuration);
const stream = chartJSNodeCanvas.renderToStream(configuration);
})();
Also see the example and the generated image.
Every instance of ChartJSNodeCanvas
creates its own canvas. To ensure efficient memory and GC use make sure your implementation creates as few instances as possible and reuses them:
// Re-use one service, or as many as you need for different canvas size requirements
const smallChartJSNodeCanvas = new ChartJSNodeCanvas({ width: 400, height: 400 });
const bigCChartJSNodeCanvas = new ChartJSNodeCanvas({ width: 2000, height: 2000 });
// Expose just the 'render' methods to downstream code so they don't have to worry about life-cycle management.
exports = {
renderSmallChart: (configuration) => smallChartJSNodeCanvas.renderToBuffer(configuration),
renderBigChart: (configuration) => bigCChartJSNodeCanvas.renderToBuffer(configuration)
};
Just use the ChartJS reference in the callback:
const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, chartCallback: (ChartJS) => {
// New chart type example: https://www.chartjs.org/docs/latest/developers/charts.html
class MyType extends Chart.DatasetController {
}
Chart.register(MyType);
}
});
Just use the ChartJS reference in the callback:
const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, chartCallback: (ChartJS) => {
// Global config example: https://www.chartjs.org/docs/latest/configuration/
ChartJS.defaults.elements.line.borderWidth = 2;
} });
Just use the registerFont
method:
const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, chartCallback: (ChartJS) => {
// Just example usage
ChartJS.global.defaultFontFamily = 'VTKS UNAMOUR';
} });
// Register before rendering any charts
chartJSNodeCanvas.registerFont('./testData/VTKS UNAMOUR.ttf', { family: 'VTKS UNAMOUR' });
See the node-canvas docs and the chart js docs.
Due to the many issues and question this includes a convenience plugin to fill the otherwise transparent background. It uses the fillStyle canvas API;
const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, backgroundColour: 'purple' });
This library is designed to make loading plugins as simple as possible. For legacy plugins, you should just be able to add the module name to the appropriate array option and the library handles the rest.
The Chart.JS plugin API has changed over time and this requires compatibility options for the different ways plugins have been historically loaded. ChartJS Node Canvas has a plugin
option with specifiers for the different ways supported plugin loading methods are handled. If you are not sure about your plugin, just try the different ones until your plugin loads:
Let ChartJSNodeCanvas
manage the lifecycle of the plugin itself, each instance will have a separate instance of the plugin:
const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, plugins: {
modern: ['chartjs-plugin-annotation']
} });
You want to share the plugin instance, this may cause unwanted issues, use at own risk:
const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, plugins: {
modern: [require('chartjs-plugin-annotation')]
} });
const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, plugins: {
requireChartJSLegacy: ['<some plugin>']
}});
require
ChartJS themselves.const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, plugins: {
globalVariableLegacy: ['chartjs-plugin-crosshair']
} });
const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, plugins: {
requireLegacy: ['chartjs-plugin-datalabels']
} });
These approaches can be combined also:
const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, plugins: {
modern: ['chartjs-plugin-annotation'],
requireLegacy: ['chartjs-plugin-datalabels']
} });
See the tests for some examples.
There is a problem with persisting config objects between render calls, see this issue for details and workarounds.
FAQs
A node renderer for Chart.js using canvas.
The npm package chartjs-node-canvas receives a total of 67,048 weekly downloads. As such, chartjs-node-canvas popularity was classified as popular.
We found that chartjs-node-canvas demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.