MultiSeries Chart with indexlabel, markers customization - CanvasJS JavaScript Charts

MultiSeries Chart with indexlabel, markers customization - CanvasJS JavaScript Charts

by canvasjs

HTML

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

JavaScript

var ToolTipHtml = "";
ToolTipHtml += "<div><b>{number}</b></div>";

var chart = new CanvasJS.Chart("chartContainer",{
	title:{
		text: "SEStimate Planning Graph",
		fontSize: 40,
		fontColor: "#000",
		horizontalAlign: "left"
	},
	axisX: {
		title: "Age in Months",
		interval: 1,
		minimum: 35.5,
		labelFontSize: 14,
		labelFontColor: "#000",
		titleFontColor: "#000",
		titleFontSize: 20,
		tickColor: "transparent",
		lineColor: "#4A83BA",
	},
	axisY: {
		title: "SEstimate Score",
		interval:5,
		gridThickness: 0,
		labelFontSize: 14,
		labelFontSize: 14,
		labelFontColor: "#000",
		titleFontColor: "#000",
		titleFontSize: 20,
		tickColor: "transparent",
		lineColor: "#4A83BA",
    maximum: 100,
	},
	data: [
		{        
		type: "line",
    highlightEnabled: false,
		color:"#4A83BA",
		markerSize:0,
		toolTipContent: "",
		lineThickness:2,
		dataPoints: [
			{ x: 35, y: 35 },
			{ x: 36, y: 35 },
			{ x: 45, y: 35}
		]
		},
		{        
		type: "line",
    highlightEnabled: false,
		color:"#4A83BA",
		toolTipContent: "",
		markerSize:0,
		lineThickness:2,
		dataPoints: [
			{ x: 42, y: 0 },
			{ x: 42, y: 43 }
		]
		},
		{        
		type: "line",
    highlightEnabled: false,
		color:"#00B2EC",
		lineThickness:2,		
    markerSize:30,
		dataPoints: [
			{ x: 43, y: 35 },
			{ x: 48, y: 37 },
			{ x: 55, y:42 }
		]
		},
    {        
		type: "scatter",
    highlightEnabled: false,
		color:"#00B2EC",		
		indexLabelPlacement: "inside",		
		indexLabelFontSize: 16,
    indexLabelFontColor: "#fff",
		markerSize:30,
    markerBorderThickness: 1,
    markerBorderColor: "#79A2BF",
		dataPoints: [
			{ x: 43, y: 35 },
			{ x: 48, y: 37, indexLabel:"5" },
			{ x: 55, y:42, indexLabel:"5" }
		]
		},
		{        
		type: "line",
    highlightEnabled: false,
		color:"purple",
		toolTipContent: "",
		lineThickness:2,
		markerSize:30,
    markerBorderThickness: 1,
    markerBorderColor: "#79A2BF",
		dataPoints: [
			{ x: 43, y: 35 },
			{ x: 48, y: 43 },
			{ x: 55, y: 54 },
			{ x:...