plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

Configuration Options in plotly.js

How to configure your Plotly graph in javascript.

The plotly.js config argument sets properties like the mode bar buttons and the interactivity in the chart. It's the last argument in Plotly.plot and Plotly.newPlot calls.
View the full list of configuration options in the plotly.js source code on GitHub .

For Enterprise Users: For Configuring the On-Premise Version, The custom domain should be set by adding the following line in the javascript code:
PLOTLYENV = 'https://<domain>.plot.ly';
// mousewheel or two-finger scroll zooms the plot

var trace1 = {
    x:['2020-10-04', '2021-11-04', '2023-12-04'],
    y: [90, 40, 60],
    type: 'scatter'
};

var data = [trace1];

var layout = {
    title: 'Scroll and Zoom',
    showlegend: false
};

Plotly.newPlot('myDiv', data, layout, {scrollZoom: true});
var trace1 = {
  x: [0, 1, 2, 3, 4],
  y: [1, 5, 3, 7, 5],
  mode: 'lines+markers',
  type: 'scatter'
};

var trace2 = {
  x: [1, 2, 3, 4, 5],
  y: [4, 0, 4, 6, 8],
  mode: 'lines+markers',
  type: 'scatter'
};

var data = [trace1, trace2];
var layout = {
    title: 'Click Here
to Edit Chart Title'}; Plotly.newPlot('myDiv', data, layout, {editable: true});
var trace1 = {
    x: [0, 1, 2, 3, 4, 5, 6],
    y: [1, 9, 4, 7, 5, 2, 4],
    mode: 'markers',
    marker: {
        size: [20, 40, 25, 10, 60, 90, 30],
    }
};

var data = [trace1];

var layout = {
    title: 'Create a Static Chart',
    showlegend: false
};

Plotly.newPlot('myDiv', data, layout, {staticPlot: true});
var trace1 = {
    y:['Marc', 'Henrietta', 'Jean', 'Claude', 'Jeffrey', 'Jonathan', 'Jennifer', 'Zacharias'],
    x: [90, 40, 60, 80, 75, 92, 87, 73],
    type: 'bar',
    orientation: 'h'
};

var data = [trace1];

var layout = {
    title: 'Always Display the Modebar',
    showlegend: false
};

Plotly.newPlot('myDiv', data, layout, {displayModeBar: true});
var trace1 = {
    x:['Zebras', 'Lions', 'Pelicans'],
    y: [90, 40, 60],
    type: 'bar',
    name: 'New York Zoo'
};

var trace2 = {
    x:['Zebras', 'Lions', 'Pelicans'],
    y: [10, 80, 45],
    type: 'bar',
    name: 'San Francisco Zoo'
};

var data = [trace1, trace2];

var layout = {
    title: 'Hide the Modebar',
    showlegend: true
};

Plotly.newPlot('myDiv', data, layout, {displayModeBar: false});
var trace1 = {
    z: [[0, 1, 2, 3, 4, 5, 6], [1, 9, 4, 7, 5, 2, 4], [2, 4, 2, 1, 6, 9, 3]],
    type: 'heatmap'
};

var data = [trace1];

var layout = {
    title: 'Change the Link Text',
    showlegend: false
};

Plotly.newPlot('myDiv', data, layout, {linkText: 'Change this text'});

Note: showLink now defaults to false.

var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6],
  y: [1, 9, 4, 7, 5, 2, 4],
  mode: 'lines+markers',
  type: 'scatter'
};

var data = [trace1];
var layout = {
	title: 'Display the Edit Chart Link',
	showlegend: false};
Plotly.newPlot('myDiv', data, layout, {showLink: True});
var trace1 = {
    x:['trees', 'flowers', 'hedges'],
    y: [90, 130, 40],
    type: 'bar'
};

var data = [trace1];

var layout = {
    title: 'Hide the Plotly Logo on the Modebar',
    showlegend: false
};

Plotly.newPlot('myDiv', data, layout, {displaylogo: false});

plotly.js runs on all SVG-compatible browsers

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.