Wrap toolTip Content using CSS - CanvasJS JavaScript Charts

Wrap toolTip Content using CSS - 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>

CSS

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   /* white-space: -moz-pre-wrap; Firefox    
   white-space: -pre-wrap;     Opera <7   
   white-space: -o-pre-wrap;   Opera 7    
   word-wrap: break-word;      IE */
}

JavaScript

var toolTipContent = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. 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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. ";

var chart = new CanvasJS.Chart("chartContainer",
{        
  toolTip:{
  	content: "<div style='max-width:200px;' class='wordwrap'>{customProperty}</div>"
  },
	data: [
	{
		type: "column",    
		dataPoints: [
			{ x: 10, y: 25, customProperty: toolTipContent },
			{ x: 20, y: 55, customProperty: toolTipContent },
			{ x: 30, y: 50, customProperty: toolTipContent },
			{ x: 40, y: 65, customProperty: toolTipContent },
			{ x: 50, y: 95, customProperty: toolTipContent },
			{ x: 60, y: 68, customProperty: toolTipContent },
			{ x: 70, y: 28, customProperty: toolTipContent },
			{ x: 80, y: 34, customProperty: toolTipContent },
			{ x: 90, y: 14, customProperty: toolTipContent }
		]
	}					
	]
});

chart.render();