Assign id to trace within a subplot

plotly.js
1

Is there anyway to assign an ID to a trace within a subplot. For example in the following I can see from the HTML that there are two elements containing each trace, can I set the ID that is assigned to each element?



var tracex = {
  x: ["UK", "France", "USA"],
  y: [4, 5, 6],
  type: 'bar'
};

y_countires=["France", "UK", "USA"]
let  y_colors = ["red", "red", "black"]
var tracey = {
  x: y_countires,
  y: [3, 2, 1],
  xaxis: 'x2',
  yaxis: 'y2',
  type: 'bar',
  marker: {
    color:y_colors
  }
};

var data = [tracex, tracey];

var layout = {
  grid: {rows: 1, columns: 2, pattern: 'independent',hovermode:'closest'},
};

Plotly.newPlot('myDiv', data, layout);
2

You could use the name parameter of the trace.

3

Thanks for your response. Using name (as shown) seems to assign a name that appears int he legend, but this doesn’t seem to give the trace an ID, unless I’m missing something?




var tracex = {
  x: ["UK", "France", "USA"],
  y: [4, 5, 6],
  type: 'bar',
  name: "tracex"
};

What I’m looking for is to be able to select the element, in a similar way to the below where mygraph is the ID I assign to the trace:

document.getElementById('mygraph')
4

You can add any extra parameters to your graph at the time of adding it and not only to the graph but also to the shapes and annotations, in my case I add id’s to be able to find the index of the graph (shape or annotation) and delete it or make some changes now that to update or delete you need to pass the graph index

Plotly.addTraces(layer, [{
    id:  'whatever',
    name: 'mygraph',
    ...
}])

You can use “layer.layout.data” to access an array containing the data objects for all the graphics or also “layer.layout.shapes” or “layer.layout.annotations” for shapes and annotations where "layer " is the container of the graph