Increase the line width when hovering the cursor in plotly?

plotly.js
1

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>
2

Is there anyone alive here?

3

Hi, I think there is no hover event fired for lines, only for markers. So it’ll be difficult to achieve this.

4

Are you sure that’s not possible? It’s a huge disadvantage. It works in chart.js, but the library itself is very slow.

5

Hi, I’m not sure 100% as I’m working with python. Maybe I’ll find out. If I do, I’ll get back to you.

6

Well, it looks like it’s really impossible for plotly.

7

Yes. Maybe this feature gets developed in the future however.

1 Like