plotly.js

The open source JavaScript graphing library that powers plotly

  • Open Source.
    These libraries are free forever. Your Pro plan helps keep them top notch.
  • Share Online.
    Share charts, dashboards, Jupyter notebooks, and presentations through our enterprise-grade cloud.
  • Engineering Support.
    Get instant chat support from our awesome engineering team.
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';
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: 'Hide the Edit Chart Link',
	showlegend: false};
Plotly.newPlot('myDiv', data, layout, {showLink: false});
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 = {
    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'});
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});
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});
// 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});

plotly.js runs on all SVG-compatible browsers

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to our Premium or Enterprise plans.