akirattii/chart.js-simple-stock-chart-example.html

## chart.js-simple-stock-chart-example.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Char.js Simple Stock Chart Example</title>
</head>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js" integrity="sha256-XF29CBwU1MWLaGEnsELogU6Y6rcc5nCkhhx89nFMIDQ=" crossorigin="anonymous"></script>
  <div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="myChart"></canvas>
  </div>
  <script>
  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: [
        "2018/10/01",
        "2018/10/02",
        "2018/10/03",
        "2018/10/04",
        "2018/10/05",
        "2018/10/06"
      ],
      datasets: [{
        label: 'USD/JPY',
        data: [110, 108, 109, 111, 112, 113],
        backgroundColor: [
          'rgba(44, 190, 142, 0.2)',
        ],
        borderColor: [
          'rgba(44, 190, 142,1)',
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: false
          }
        }]
      },
      tooltips: {
        intersect: false, // Y軸上の何処をhoverしてもtooltip表示
      },
      /**
       * Below configurations are for performance improvement:
       */
      elements: {
        line: {
          tension: 0, // disables bezier curves
        }
      },
      animation: {
        duration: 0, // general animation time
      },
      hover: {
        animationDuration: 0, // duration of animations when hovering an item
      },
      responsiveAnimationDuration: 0, // animation duration after a resize
    }
  });
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Char.js Simple Stock Chart Example</title>
	</head>

	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js" integrity="sha256-XF29CBwU1MWLaGEnsELogU6Y6rcc5nCkhhx89nFMIDQ=" crossorigin="anonymous"></script>
	<div class="chart-container" style="position: relative; height:40vh; width:80vw">
	<canvas id="myChart"></canvas>
	</div>
	<script>
	var ctx = document.getElementById("myChart");
	var myChart = new Chart(ctx, {
	type: 'line',
	data: {
	labels: [
	"2018/10/01",
	"2018/10/02",
	"2018/10/03",
	"2018/10/04",
	"2018/10/05",
	"2018/10/06"
	],
	datasets: [{
	label: 'USD/JPY',
	data: [110, 108, 109, 111, 112, 113],
	backgroundColor: [
	'rgba(44, 190, 142, 0.2)',
	],
	borderColor: [
	'rgba(44, 190, 142,1)',
	],
	borderWidth: 1
	}]
	},
	options: {
	scales: {
	yAxes: [{
	ticks: {
	beginAtZero: false
	}
	}]
	},
	tooltips: {
	intersect: false, // Y軸上の何処をhoverしてもtooltip表示
	},
	/**
	* Below configurations are for performance improvement:
	*/
	elements: {
	line: {
	tension: 0, // disables bezier curves
	}
	},
	animation: {
	duration: 0, // general animation time
	},
	hover: {
	animationDuration: 0, // duration of animations when hovering an item
	},
	responsiveAnimationDuration: 0, // animation duration after a resize
	}
	});
	</script>
	</body>

	</html>