Canvasjs Line Chart

by nehamahajan

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 250px;"></div>

CSS

.wordwrap { 
   white-space: pre-wrap;
}
.canvasjs-chart-tooltip * {
  max-width: 200px !important; 
}
.canvasjs-chart-tooltip {
  left: 250px !important;
  width: 200px;
}

JavaScript

var toolTipContenData1 = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. ";

var toolTipContenData2 = "Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ";


var chart = new CanvasJS.Chart("chartContainer",
{        
  toolTip:{
  	content: "<div style='max-width:200px;' class='wordwrap'>{customProperty}</div>"
  },
	data: [
	{
		type: "line",
    lineColor: "red",
		dataPoints: [
			{ x: 10, y: 25, customProperty: toolTipContenData1 },
			{ x: 20, y: 55, customProperty: toolTipContenData1 },
			{ x: 30, y: 50, customProperty: toolTipContenData1 },
			{ x: 40, y: 65, customProperty: toolTipContenData1 }
		]
	},
  {
		type: "line",  
    lineColor: "blue",
		dataPoints: [
			{ x: 10, y: 25, customProperty: toolTipContenData2 },
			{ x: 20, y: 55, customProperty: toolTipContenData2 },
			{ x: 30, y: 50, customProperty: toolTipContenData2 },
			{ x: 40, y: 65, customProperty: toolTipContenData2 }
		]
	}	
	]
});

chart.render();