CanvasJS Tooltip on Right

by nehamahajan

HTML

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

CSS

.canvasjs-chart-tooltip {
  left: 250px !important;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
{        
  toolTip:{
  	contentFormatter:  function ( e ) {
    	let tooltip = '<div>';
      tooltip += '<div><span>Lorem Ipsum:</span><span> 121212 kg</span></div>';
      tooltip += '<div><span>simply dummy text of the printing:</span><span> 121212 kg</span></div>';
      tooltip += '<div><span>five centuries:</span><span>121212 kg</span></div>';
      tooltip += '<div><span>galley of type and scrambled:</span><span>121212 kg</span></div>';
      tooltip += '<div><span>electronic typesetting:</span><span>121212 kg</span></div>';
      tooltip += '</div>'
    	return tooltip; 
   	}  
  },
	data: [
	{
		type: "line",    
		dataPoints: [
			{ x: 10, y: 25},
			{ x: 20, y: 55},
			{ x: 30, y: 50},
			{ x: 40, y: 65},
			{ x: 50, y: 95},
			{ x: 60, y: 68},
			{ x: 70, y: 28},
			{ x: 80, y: 34},
			{ x: 90, y: 14}
		]
	}					
	]
});

chart.render();