Control legend for particular range of x axis for different traces using plotly javascript library

plotly.js
1

I want to control the legends of different traces all at once for particular range lets say x=0 to x=5. How can we do it?

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 trace3 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [5, 7, 3, 2, 8, 6, 1, 9, 3],
  type: 'scatter'
};

var data = [trace1, trace2, trace3];
var layout = {showlegend: true,
    legend: {"orientation": "h"}};
 
Plotly.newPlot('myDiv', data, layout);

For example, when we click a legend, the encircled portion should get hid.

trace_legend

Sample code: Codepen_Sample