Black Lives Matter. Please consider donating to Black Girls Code today.

Legends in Nodejs

How to modify the legend in nodejs graphs. Seven examples of how to move, color, and hide the legend.


// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

require('plotly')(username, api_key);

var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
  type: "scatter"
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
  type: "scatter"
};
var data = [trace1, trace2];
var layout = {showlegend: false};
var graphOptions = {layout: layout, filename: "legend-visibility", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});
// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

require('plotly')(username, api_key);

var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
  name: "Blue Trace",
  type: "scatter"
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
  name: "Orange Trace",
  type: "scatter"
};
var data = [trace1, trace2];
var graphOptions = {filename: "legend-labels", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});
// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

require('plotly')(username, api_key);

var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
  type: "scatter"
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
  type: "scatter"
};
var data = [trace1, trace2];
var layout = {
  showlegend: true,
  legend: {
    x: 1,
    y: 1
  }
};
var graphOptions = {layout: layout, filename: "legend-inside", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});
// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

require('plotly')(username, api_key);

var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
  type: "scatter"
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
  type: "scatter"
};
var data = [trace1, trace2];
var layout = {
  showlegend: true,
  legend: {
    x: 100,
    y: 1
  }
};
var graphOptions = {layout: layout, filename: "legend-outside", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});
// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

require('plotly')(username, api_key);

var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
  type: "scatter"
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
  type: "scatter"
};
var data = [trace1, trace2];
var layout = {legend: {
    x: 0,
    y: 1,
    traceorder: "normal",
    font: {
      family: "sans-serif",
      size: 12,
      color: "#000"
    },
    bgcolor: "#E2E2E2",
    bordercolor: "#FFFFFF",
    borderwidth: 2
  }};
var graphOptions = {layout: layout, filename: "legend-style", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});
// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

require('plotly')(username, api_key);

var trace1 = {
  x: [0, 1, 2],
  y: [1, 2, 3],
  name: "First Trace",
  showlegend: false,
  type: "scatter"
};
var trace2 = {
  x: [0, 1, 2, 3],
  y: [8, 4, 2, 0],
  name: "Second Trace",
  showlegend: true,
  type: "scatter"
};
var data = [trace1, trace2];
var graphOptions = {filename: "show-legend", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});