JS

HTMLの書き方
body内のグラフを表示させたい場所にid名を付けたcanvasタグを記載します。

<canvas id="chart"></canvas>

body 終了タグ直前に jQuery、Chart.js、jquery.inview.js 動きを制御する自作のJS の4 つを読み込みます

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<!--自作のJS-->
<script src="js/9-5-5.js"></script>

JSの書き方

//値をグラフに表示させる
Chart.plugins.register({
	afterDatasetsDraw: function (chart, easing) {
		var ctx = chart.ctx;
		chart.data.datasets.forEach(function (dataset, i) {
			var meta = chart.getDatasetMeta(i);
			if (!meta.hidden) {
				meta.data.forEach(function (element, index) {

					// 値の表示
					ctx.fillStyle = 'rgb(0, 0, 0,0.8)';//文字の色
					var fontSize = 12;//フォントサイズ
					var fontStyle = 'normal';//フォントスタイル
					var fontFamily = 'Arial';//フォントファミリー
					ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
					var dataString = dataset.data[index].toString();
					
					// 値の位置
					ctx.textAlign = 'center';//テキストを中央寄せ
					ctx.textBaseline = 'middle';//テキストベースラインの位置を中央揃え
					var padding = 5;//余白
					var position = element.tooltipPosition();
					ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);		
				});
			}
		});
	}
});


//=========== 折れ線グラフ（複数） ============//
$('#chart02').on('inview', function(event, isInView) {//画面上に入ったらグラフを描画
	if (isInView) {

		var ctx=document.getElementById("chart02");//グラフを描画したい場所のid
		var chart=new Chart(ctx,{
			type:'line',//グラフのタイプ
			data:{//グラフのデータ
				labels:[ "1月","2月","3月","4月","5月","6月", ],//データの名前
				datasets: [ {
					label:"Aさん",//グラフのタイトル
					borderColor: "rgba(255,0,0,1)",//グラフの線の色
					backgroundColor:"rgba(255,0,0,0)",//グラフの背景色透過
					data:[ "60","55","54","50","49","47", ]//横列に並ぶデータ
				},{
					label:"Bさん",//グラフのタイトル
					borderColor: "rgba(130,201,169,0.5)",//グラフの線の色
					backgroundColor:"rgba(130,201,169,0)",//グラフの背景色透過
					data:[ "90","85","74","60","59","50", ]//横列に並ぶデータ
				},{
					label:"Cさん",//グラフのタイトル
					borderColor: "rgba(255,183,76,0.5)",//グラフの線の色
					backgroundColor:"rgba(255,183,76,0)",//グラフの背景色透過
					data:[ "78","75","70","67","60","45", ]//横列に並ぶデータ
				}
				]

			},
			options:{//グラフのオプション
				legend:{
					display: true//グラフの説明を表示
				},
				tooltips:{//グラフへカーソルを合わせた際のツールチップ詳細表示の設定
					callbacks:{
						label: function(tooltipItems, data) {
							if(tooltipItems.yLabel == "0"){
								return "";
							}
							return data.datasets[tooltipItems.datasetIndex].label + "：" + tooltipItems.yLabel + "Kg";//Kgを最後につける
						}
					}
				},
				title:{//上部タイトル表示の設定
					display: true,
					fontSize:10,
					text: '単位：Kg'
				},
				scales:{
					yAxes:[ //グラフ縦軸（Y軸）設定
						{
						ticks:{
							beginAtZero:true,//0からスタート
							suggestedMax: 100,//最大が100
							suggestedMin: 0,//最小が0
							stepSize: 10,//10づつ数値が刻まれる
							callback: function(value){
							return  value +  'Kg'//数字＋%で表示			
						}
					}
				}
				],
				xAxes:[ //棒グラフ横（X軸）設定
					{
					barPercentage:0.5,//バーの太さ
					}
				]
			}
		}
	});    
}
});