Spline Chart with markers shown only for datapoint selected by user - CanvasJS JavaScript Charts

Spline Chart with markers shown only for datapoint selected by user - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
	axisX: {
  	suffix: "%"
  },
  axisY: {
  	suffix: "%"
  },
	data: [
	{
		type: "spline",
    markerSize: 0,
    lineColor: "#68CFC4",
    color: "#ED7974",
		dataPoints: [
			{ x: 1, y: 1, name: "d" },
			{ x: 5, y: 4.2, name: "e" },
			{ x: 9, y: 5.7, name: "f" },
			{ x: 13, y: 6.3, name: "g" },
			{ x: 15, y: 6.5, name: "h" }
		]
	}					
	]
});

chart.render();
addCustomLegends(chart);

function addCustomLegends(chart) {
	$("#chartContainer").css({"width": "85%"});
	chart.render();
  
  var div = document.createElement("div");
  $(div).attr('id', 'customLegends');
  var ul = document.createElement("ul");  
  
  $(div).css({ "width": "15%", "height": chart.get("height") + "px", "overflow-y": "auto", "float": "left"})
  $(div).append($(ul));
  for(var i=0; i < chart.data.length; i++){	
    for(var j=0; j < chart.data[i].dataPoints.length; j++){	
      var li = document.createElement("li");
      $(li).attr("type", "square");
      li.style.color = chart._selectedColorSet[j % chart._selectedColorSet.length];
      li.appendChild(document.createTextNode("Point-" + chart.data[i].dataPoints[j].name));
      ul.appendChild(li); 
      $('li').each(function (i) {
        $(this).attr('id', (i));
      });
    }
  }
  $(div).insertBefore('#chartContainer');
  
  $('li').click(function (event) {
         var index = $(this).index();
         var x = document.getElementById(index);
         for(var i = 0; i < chart.options.data.length; i++) {
         		for(var j = 0; j < chart.options.data[i].dataPoints.length; j++) {
         				chart.options.data[i].dataPoints[j].markerSize = 0;
                chart.options.data[i].dataPoints[j].indexLabel = "";
         		}
            chart.options.data[i].dataPoints[index].markerSize = 30;
            chart.options.data[i].dataPoints[index].indexLabel = chart.options.data[i].dataPoints[index].name;
         }
        chart.render();
  	});  
}