Make my own custom legend

plotly.js
1

Hello,

I’ve been trying to make my own legend that is not in the same component. I couldn’t find a way to do it.

example
example1908×798 154 KB

2

Hello,
I have done what you want to do for my company.
Personally, I send the array of names and the array of colors in my custom legend.
So if you have JQuery it looks like this:

let arrName = ["trace1","trace2"];
let arrColors = ["#FF0000", "#0000FF"];
let trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  type: 'scatter',
  name: arrNames[0],
  color: arrColors[0]
};

let trace2 = {
  x: [1, 2, 3, 4],
  y: [16, 5, 11, 9],
  type: 'scatter',
  name: arrNames[0],
  color: arrColors[0]
};

var data = [trace1, trace2];

Plotly.newPlot('myDiv', data);

// I get the Legend component object
let legendObj = document.getElementById("LegendComponentId");
// I set my legend with one of its functions using JQuery
 $(legendObj).SetLegend(arrNames, arrColors);

I hope it helps you.