Canvasjs Legend Series Hover

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 450px;"></div>

JavaScript

function mouseOver(e) {
  console.log("in mouse over");
  e.chart.data[e.dataSeriesIndex].set('lineThickness', 3, false);

  _.forEach(e.chart.data, (data, index) => {
    if(index !== e.dataSeriesIndex) {
      data.set('lineThickness', 0.25, false);
    }
  });

  e.chart.render();
}

function mouseOut(e) {
  console.log("in mouse out");
    _.forEach(chart.data, (data, index) => {
      data.set('lineThickness', 2, false);
    });
  chart.render();
}

document.getElementById("chartContainer").addEventListener("mouseout", function() {
  mouseOut();
});

var chart = new CanvasJS.Chart("chartContainer",
                               {        
  legend: {
    itemmouseover: function(e){
      mouseOver(e);
    },
    itemmouseout: function(e){
      mouseOut(e);
    }
  },
  data: [
    {
      type: "line",
      color: "red",
      showInLegend: true,
      markerSize: 0,
      legendText: "Apples",
      mouseover: function(e){
        mouseOver(e);
      },
      mouseout: function(e){
        mouseOut(e);
      },
      dataPoints: [
        { x: 10, y: 25},
        { x: 20, y: 55},
        { x: 30, y: 50},
        { x: 40, y: 65}
      ]
    },
    {
      type: "line",  
      color: "blue",
      markerSize: 0,
      showInLegend: true,
      legendText: "Oranges",
      mouseover: function(e){
        mouseOver(e);
      },
      mouseout: function(e){
        mouseOut(e);
      },
      dataPoints: [
        { x: 20, y: 25},
        { x: 30, y: 55},
        { x: 40, y: 50},
        { x: 50, y: 65}
      ]
    }	
  ]
});

chart.render();