Subplots mouseover trace1 highlight trace2

plotly.js
1

Hi,

I have two bar charts arranged as subplots. Is there a way that when I mouseover on trace1 it highlights the related bar in trace2. i.e. mouseover UK in trace1 would highlight not only the UK bar in trace1 but also the UK bar in trace2.

Thanks

var trace1= {
x: [“UK”, “France”, “USA”],
y: [4, 5, 6],
type: ‘bar’
};

var trace2 = {
x: [“France”, “UK”, “USA”],
y: [3, 2, 1],
xaxis: ‘x2’,
yaxis: ‘y2’,
type: ‘bar’
};

var data = [trace1, trace2];

var layout = {
grid: {rows: 1, columns: 2, pattern: ‘independent’},
};

Plotly.newPlot(‘myDiv’, data, layout);

2

I’ve managed to grab the x axis value of the highlighted point, change color of entire bar chart on mouseover.



var myPlot = document.getElementById('myDiv');
 myPlot.on('plotly_hover', function(data){
   //get the x axis value of selected country	
   data.points.map(
   	function(d){
   	  var country = d.x;
   	  console.log(country);
    })

    var update = { 'marker.color': 'red'}
    Plotly.restyle(myDiv, update, 1);
   	} );

 myPlot.on('plotly_unhover', function(data){
    var update = { 'marker.color': 'black'}
    Plotly.restyle(myDiv, update, 1);
});

The last piece is to be able to change the color of a single bar only by the x axis values, note that the order of the x axis isn’t necessarily the same across both charts so I don’t really want to pass an array of colors, is there some way to change the color by the x axis value (which I’ve extracted from the mouseover)?