High-light the dataSeries while using mouse event on legend - CanvasJS

High-light the dataSeries while using mouse event on legend - CanvasJS

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<body>
	<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
{
	title:{
		text: "lineThickness changed on mouse events of Legend"
	},
	legend: {
		cursor:"pointer",
		itemmouseover: onItemMouseOver,  
		itemmouseout : onItemMouseOut
	},
	data: [
	{
		type: "line",
		showInLegend: true,
		legendText: "dataSeries 1",
		dataPoints: [
			{x: 10, y: 100 },
			{x: 20, y: 155 },
			{x: 30, y: 360 },
			{x: 40, y: 170 },
			{x: 50, y: 135 },
			{x: 60, y: 260 },
			{x: 70, y: 240 },
			{x: 80, y: 500 },      
			{x: 90, y: 80  }
		]
	},
	{
		type: "line",
		showInLegend: true,
		legendText: "dataSeries 2",
		dataPoints: [
			{x: 10, y: 130 },
			{x: 20, y: 125 },
			{x: 30, y: 260 },
			{x: 40, y: 370 },
			{x: 50, y: 235 },
			{x: 60, y: 220 },
			{x: 70, y: 140 },
			{x: 80, y: 600 },      
			{x: 90, y: 180 }
		]
	}
	]
});
chart.render();

function onItemMouseOver(e){
	e.dataSeries.lineThickness = 5;
	e.chart.render();
}

function onItemMouseOut(e){
	e.dataSeries.lineThickness = 1;
	e.chart.render();
}