Plotly

Built on top of d3.js and stack.gl, Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps. plotly.js is free and open source and you can view the source, report issues or contribute on GitHub.

See here (https://plotly.com/javascript/) for more information about Plotly

• Features
• node.js
• Notes
• Samples
• API

Features

• Render plots (from within node.js)
• Generate a base64 encoded string of the image
• Save to file without rendering

node.js

• You can try plotly from within a node.js environment and get the exact same output you'd get when using Plotly in a browser.
• Currently Plotly requires an internet connection to inject the plotly script into the output renderer.
• To render plots using plotly merely import plotly from node-kernel using any of the following import styles:

const { Plotly } = require('node-kernel');
import { Plotly } from 'node-kernel';

Notes:

• installation of the package node-kernel is only recommended if you need code completion for Plotly.
• This package is build into the notebook kernel (hence does not need to be installed)

Samples

1. Generating a simple plot

const { Plotly } = require('node-kernel');
var data = [{
    values: [19, 26, 55],
    labels: ['Residential', 'Non-Residential', 'Utility'],
    type: 'pie'
}];

var layout = {
    height: 400,
    width: 500
};

Plotly.newPlot('myDiv', data, layout);

2. Generating a base64 string of the image

const { Plotly } = require('node-kernel');
var data = [{
    values: [19, 26, 55],
    labels: ['Residential', 'Non-Residential', 'Utility'],
    type: 'pie'
}];

var layout = {
    height: 400,
    width: 500
};

const outputBase64 = Plotly.toBase64(data, layout);
console.log(outputBase64);

Note, the image will be displayed, but you can switch the mime type and view the base64 version as follows:

3. Generating a plot to a file

const { Plotly } = require('node-kernel');
var data = [{
    values: [19, 26, 55],
    labels: ['Residential', 'Non-Residential', 'Utility'],
    type: 'pie'
}];

var layout = {
    height: 400,
    width: 500
};

const outputFileName = Plotly.toFile(data, layout);
console.log(outputFileName);

API:

/**
 * Renders a plotly plot.
 * See detailed documentation here https://plotly.com/javascript/plotlyjs-function-reference/#plotlynewplot
 */
export function newPlot(
    root: plotly.Root,
    data: plotly.Data[],
    layout?: Partial<plotly.Layout>,
    config?: Partial<plotly.Config>
): Promise<void>;
/**
 * Returns a base64 encoded string representation of the generated plot.
 * @param {plotly.Data[]} data See detailed documentation here https://plotly.com/javascript/plotlyjs-function-reference/#plotlynewplot
 * @param {plotly.Layout} layout See detailed documentation here https://plotly.com/javascript/plotlyjs-function-reference/#plotlynewplot
 * @param {('png' | 'svg' | 'jpeg')} [format] Defaults to 'png' if not specified.
 */
export function toBase64(
    data: plotly.Data[],
    layout: plotly.Layout,
    format?: 'png' | 'svg' | 'jpeg'
): Promise<string>;
/**
 * Saves the generated plot into a file.
 * Return the path to the file name (if a file path is not provided a temporary image file is created and returned).
 * @param {plotly.Data[]} data See detailed documentation here https://plotly.com/javascript/plotlyjs-function-reference/#plotlynewplot
 * @param {plotly.Layout} layout See detailed documentation here https://plotly.com/javascript/plotlyjs-function-reference/#plotlynewplot
 * @param {('png' | 'svg' | 'jpeg')} [format] Defaults to 'png' if not specified.
 * @param {string} [file] Destination file path for the image to be downloaded.
 * If not specified, the image is downloaded into a temporary file and that path is returned.
 * @return {*}  {Promise<string>}
 */
export function toFile(
    data: plotly.Data[],
    layout: plotly.Layout,
    format?: 'png' | 'svg' | 'jpeg',
    file?: string
): Promise<string>;