# Optimize changing trace color on hover

**URL:** <https://community.plotly.com/t/optimize-changing-trace-color-on-hover/64880>\
**Category:** plotly.js\
**Tags:** question\
**Created:** [June 7, 2022, 5:42pm UTC](https://community.plotly.com/t/optimize-changing-trace-color-on-hover/64880 "2022-06-07T17:42:28Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![MGans](https://avatars.discourse-cdn.com/v4/letter/m/b2d939/32.png) [@MGans](https://community.plotly.com/u/MGans)\
**Post date:** [June 7, 2022, 5:42pm UTC](https://community.plotly.com/t/optimize-changing-trace-color-on-hover/64880/1 "2022-06-07T17:42:28Z")

</div>

In this reprex Im changing the opacity of the hovered over line, but the change is really slow - is there any way to optimize this process when you have a lot of traces?

codepen: [https://codepen.io/MayaRGans/pen/LYQJdqZ?editors=1111](https://codepen.io/MayaRGans/pen/LYQJdqZ?editors=1111)

```auto
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv"></div>
  <script>
  </script>
</body>
</html>

```

```auto
let x = []
for (let i = 0; i < 100; i++) {
  x.push([1,2,3,4])
}

let y = []
for (let i = 0; i < 50; i++) {
  y.push(Array.from({length: 4}, () => Math.floor(Math.random() * 40)))
}

let plotData = x.map((n,i) => {
  return ({
    x: n,
    y: y[i],
    type: 'scattergl',
    mode: 'lines',
    hoverinfo: 'none'
  })
})

const plotDiv = document.getElementById('myDiv');
Plotly.newPlot(plotDiv, plotData).then(gd => {
  gd.on('plotly_hover', d => {
   var curveNumber = d.points[0].curveNumber
   var opacity_vals = gd.data.map((_,i)=> i === curveNumber ? 1 : 0.2)
  Plotly.restyle(gd, 'opacity', opacity_vals)
  }).on('plotly_unhover', d => {
    var opacity_vals = gd.data.map(x => 1)
    Plotly.restyle(gd, 'opacity', opacity_vals)
  })
})

```

any help appreciated!

---

<div class="post-metadata">

**Author:** ![MGans](https://avatars.discourse-cdn.com/v4/letter/m/b2d939/32.png) [@MGans](https://community.plotly.com/u/MGans)\
**Post date:** [June 9, 2022, 3:30pm UTC](https://community.plotly.com/t/optimize-changing-trace-color-on-hover/64880/2 "2022-06-09T15:30:10Z")

</div>

I updated the code in the codepen so that it works, it’s just really slow with a lot of lines!