JSFiddle - React, Tailwind, and code Playground

by SungSuNam

HTML

<title>Tooltip Interaction Modes</title>
	<!-- <script src="../../dist/chart.min.js"></script> -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js" integrity="sha512-QEiC894KVkN9Tsoi6+mKf8HaCLJvyA6QIRzY5KrfINXYuP9NxdIkRQhGq3BZi0J4I7V5SidGM3XUQ5wFiMDuWg==" crossorigin="anonymous"></script>
	<script src="../../utils.js"></script>
  
  <div class="container"> </div>

CSS

canvas {
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
		}

		.chart-container {
			width: 400px;
			margin-left: 10px;
			margin-right: 10px;
			margin-bottom: 10px;
			border : 1px solid black;
		}

		.container {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
		}

JavaScript

var charts = [];

		// 차트 생성하기
		function createConfig(mode, intersect) {
			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: 'Mode: ' + mode + ', intersect = ' + intersect
					},
          // 내용 표현 방법
					tooltips: {
						mode: mode,
						intersect: intersect,
					},
					hover: {
						mode: mode,
						intersect: intersect
					},
				}
			};
		}

		window.onload = function () {
      // div.container를 찾아서 차트를 생성함.
			var container = document.querySelector('.container');
			// mode : defalut 'nearest' (툴팁에 표시되는 요소를 설정)
			// intersect : defalut true || false (마우스 위치가 차트의 항목과 교차할 때 만 호보)
			// axis : 
			// animationDuration : 호버 스타일 변경을 애니메이션하는 데 걸리는 시간 (밀리 초)
			[{
				mode: 'index',
				intersect: true,
				animationDuration: 100
			}, {
				mode: 'index',
				intersect: false,
				animationDuration: 300
			}, {
				mode: 'dataset',
				intersect: true,
				animationDuration: 100
			}, {
				mode: 'dataset',
				intersect: false,
				animationDuration: 300
			}, {
				mode: 'point',
				intersect: true,
				animationDuration: 100
			}, {
				mode: 'point',
				intersect: false,
				animationDuration: 300
			}, {
				mode: 'nearest',
				intersect: true,
				animationDuration: 100
			}, {
				mode: 'nearest',
				intersect: false,
				animationDuration: 300
			}, {
				mode: 'x',
				intersect: true,
				animationDuration: 100
			}, {
				mode:...