JSFiddle - React, Tailwind, and code Playground

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 {
  left: 250px !important;
}

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();