Canvasjs Legend Series Hover

by nehamahajan

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(e.chart.data, (data, index) => {
      data.set('lineThickness', 2, false);
  });

  e.chart.render();
}

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();