[SOLVED] Increase the line width when hovering the cursor in plotly?

Increase the line width when hovering the cursor in plotly?

I'd like to increase the width of the line and its points when hovering the mouse cursor over a line. Animate parameters such as marker size and line width somehow when the mouse cursor is over them. How can I do that?

<head>
  <script src="https://cdn.plot.ly/plotly-2.24.2.min.js" charset="utf-8"></script>
</head>
<body>
  <div id="myDiv"></div>
  <script>
    var data = [
      {
        x: ['2013-10-04 22:23:00', '2013-11-04 22:23:00', '2013-12-04 22:23:00'],
        y: [1, 3, 6],
        type: 'scatter',
        mode: "lines+markers",
        marker: {
          size: 10
        },
        line: {
          width: 4
        }
      }
    ];

    Plotly.newPlot('myDiv', data);
  </script>
</body>

Solution

The plotly_hover event is only triggered on hovering the markers (datapoints):

<head>
  <script src="https://cdn.plot.ly/plotly-2.24.2.min.js" charset="utf-8"></script>
</head>
<body>
  <div id="myDiv"></div>
  <script>
var data = [
  {
    x: ['2013-10-04 22:23:00', '2013-11-04 22:23:00', '2013-12-04 22:23:00'],
    y: [1, 3, 6],
    type: 'scatter',
    mode: "lines+markers",
    marker: {
      size: 10
    },
    line: {
      width: 4
    }
  }
];
var layout = {
title: 'plotly_hover',
autorange: false,
  xaxis: {
    range: ['2013-10-04 00:00:00', '2013-12-06 00:00:00']
  },
  yaxis: {
    range: [0, 7]
  }
};
Plotly.newPlot('myDiv', data, layout);
var myPlot = document.getElementById('myDiv')
myPlot.on('plotly_hover', function(){
  var update = {'line.width': 10, 'marker.size': 20};
  Plotly.restyle(myPlot, update, 0);
});
myPlot.on('plotly_unhover', function(){
  var update = {'line.width': 4, 'marker.size': 10};
  Plotly.restyle(myPlot, update, 0);
});
  </script>
</body>

Please also check plotly's function reference on Plotly.restyle.