<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>
var trace1 = {
  x: [1, 2, 3, 4], 
  y: [10, 15, 13, 17], 
  type: 'scatter',
  mode: 'line',
  hoverlabel: {
    bordercolor: ['red', 'red', null, null],
    font: {
      color: 'white',
      size: [20, 20, null, null],
    },
  }
};
var trace2 = {
  x: [1, 2, 3, 4], 
  y: [-5, -8, -3, -13], 
  type: 'scatter',
  mode: 'line',
  hoverlabel: {
    bordercolor: ['red', 'red', null, null],
    font: {
      color: 'white',
      size: [20, 20, null, null],
    },
  }
};
var data = [trace1, trace2];

var myPlot = document.getElementById('myDiv');
Plotly.newPlot(myPlot, data, {
  xaxis: {
    boundsmode: 'auto',
  },
    yaxis: {
    boundsmode: 'auto',
  },
});

var shapes = [
   {
     type: 'rect',
     xref: 'x',
     yref: 'paper',
     x0: 1,
     y0: 0,
     x1: 2.5,
     y1: 1,
     fillcolor: 'rgba(255,0,0,0.2)',
     line: {
       width: 0,
     },
   }
];
Plotly.relayout(myPlot, 'shapes', shapes);

myPlot.on('plotly_hover', function(data) {
  if (data.points[0].x >= 1 && data.points[0].x <= 2.5) {
   // restyle the hover boxes
    console.log('restyle');
  }
});

myPlot.on('plotly_unhover', function(data) {
   // undo restyle of hover boxes
    console.log('undo');
});

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.