Skip to content
Don Jayamanne edited this page Aug 22, 2021 · 13 revisions

https://plotly.com/javascript/

Features

  • Ability to render plots
  • Ability to render plots and get a base64 encoded string of the image
  • Ability to render plots and save it to a file.

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)

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>;

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: seebase64

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);

Home

Clone this wiki locally