first commit

2023-04-26 13:17:21 +02:00
commit 535741001e
1612 changed files with 820287 additions and 0 deletions
--- a/chart/samples/tooltips/position-modes.html
+++ b/chart/samples/tooltips/position-modes.html
@ -0,0 +1,86 @@
+<!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>