Subplots mouseover trace1 highlight trace2

plotly.js
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)?