Published on: 9/18/2018


npm install nodeplotlib # or yarn add nodeplotlib
Visit npmjs for package insights and more details.


To create a plot in NodeJS with JavaScript/TypeScript simply do:
import { plot } from 'nodeplotlib'; const data = [{x: [1, 3, 4, 5], y: [3, 12, 1, 4], type: 'line'}]; plot(data);
If ES5, use require() instead of import.
Since Python provides with matplotlib a library for spawning plot windows, NodeJS isn't by default. But there are awesome plotting libraries for usage in front-end. So this lib targets people like scientists who easily want to create beautiful plots in a time-saving way.
The library provides a simple interface with (for now) just three functions. A plot, stack and a clear function. The plot() functions spawns a plot to the browser, if a plotdata is given as an argument. Otherwise it plots all the stack()ed plotdata. The arguments are of type Plotly.js PlotData. Trivially the clear() function clears the stack.
The following snippet provides an 'reallife' example with tensorflow to get an idea of its simplicity and how to use it.
import { sequential, layers, tensor2d } from '@tensorflow/tfjs'; import '@tensorflow/tfjs-node-gpu'; // Just import plot import { plot } from 'nodeplotlib'; const model = sequential(); model.add(layers.dense({units: 1, inputShape: [1], name: 'mytensor'})); model.compile({loss: 'meanSquaredError', optimizer: 'sgd'}); const tensorX = [1, 2, 3, 4]; const tensorY = [1, 3, 5, 7]; const xs = tensor2d(tensorX, [4, 1]); const ys = tensor2d(tensorY, [4, 1]); // Spawn a plot in your browser. plot([{ x: tensorX, y: tensorY, type: 'line' }]);
With the stack function the user is able to print multiple charts on one page (e.g. three times the same plot).
import { plot, stack, clear } from 'nodeplotlib' import { PlotData } from 'plotly.js' const data: Partial<PlotData>[] = [{ x: [ 1, 3, 4, 6, 7], y: [ 2, 4, 6, 8, 9], type: 'scatter' }]; stack(data); stack(data); stack(data); plot();
Be sure to run the plot() function.
Behind the scenes
The lib launches an express webserver and opens new tabs for every plot located at http://localhost:8080/plots/:id. The client side js requests the plot data at http://localhost:8080/data/:id. After all pending plots are opened in a unique tab and all the data is requested, the server shuts down. If you fire another plot the server starts again provides your plot and shuts down automatically.
Like this project? Star on github Follow @ngfelixl