[ Mini Kiebo ]

Server: Windows NT AKFAR_SERVER 10.0 build 26200 (Windows 10) AMD64 Path: D:/BACKUP C 19-12/XAMPP74/htdocs/pmb/chartjs/samples/tooltips/ [ Home ]
File: positioning.html
<!doctype html>
<html>

<head>
	<title>Tooltip Interaction Modes</title>
	<script src="../../Chart.bundle.js"></script>
	<script src="../utils.js"></script>
	<style>
	canvas {
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	.chart-container {
		width: 500px;
		margin-left: 40px;
		margin-right: 40px;
		margin-bottom: 40px;
	}
	.container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
	</style>
</head>

<body>
	<div class="container">
	</div>
	<script>
		function createConfig(position) {
			return {
				type: 'line',
				data: {
					labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
					datasets: [{
						label: 'My First dataset',
						borderColor: window.chartColors.red,
						backgroundColor: window.chartColors.red,
						data: [10, 30, 46, 2, 8, 50, 0],
						fill: false,
					}, {
						label: 'My Second dataset',
						borderColor: window.chartColors.blue,
						backgroundColor: window.chartColors.blue,
						data: [7, 49, 46, 13, 25, 30, 22],
						fill: false,
					}]
				},
				options: {
					responsive: true,
					title: {
						display: true,
						text: 'Tooltip Position: ' + position
					},
					tooltips: {
						position: position,
						mode: 'index',
						intersect: false,
					},
				}
			};
		}

		window.onload = function() {
			var container = document.querySelector('.container');

			['average', 'nearest'].forEach(function(position) {
				var div = document.createElement('div');
				div.classList.add('chart-container');

				var canvas = document.createElement('canvas');
				div.appendChild(canvas);
				container.appendChild(div);

				var ctx = canvas.getContext('2d');
				var config = createConfig(position);
				new Chart(ctx, config);
			});
		};
	</script>
</body>

</html>