<!DOCTYPE html>
<html lang = "ja">
<head>
    <meta charset = "UTF-8">
    <!--<script src = "chart.umd.js"></script>--><!-- ライブラリをダウンロードしている場合 -->
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js"></script>
    <!-- chart.umd.jsを読み込む -->
</head>
<body>
    <canvas id ='ChartID' style="width: 800px; height: 400px; margin: auto; background-color: black;" ></canvas>
    <script>
        var ctx = document.getElementById('ChartID').getContext('2d');
        var myChart = new Chart( ctx, {
        //以下にチャート表示するデータをセットしていく
            type: 'line',
            data: {
                labels: [1,2,3,4,5,6,7],

                datasets: [{
                    type:'line',
                    label: 'sample3',
                    data: [20,17,16,14,18,20,17],
                    borderColor: 'yellow', //線の色
                    backgroundColor:"yellow",
                    borderWidth: 1, //線の幅
                    pointRadius: 1, //プロットした点の大きさ
                }]
            },
            options: {
                responsive: true,

                plugins: { //表示タイトルをつける場合
                    title: {
                        display: true,
                        color:"white",
                        text: 'サンプルグラフ3',
                        font: {
                            size: 20,
                        },
                    },//表示タイトルをつける場合--end--
                    legend:{
                        position:"right",
                        labels:{
                            color:"white",
                        }
                    }
                }, 

                scales: {
                    x: {
                        ticks: {
                            display: true,
                            color:"white",
                        },
                        grid:{
                            color:"gray",
                            borderDash: [1,5],
                            borderWidth: 1,
                            tickColor:"red",
                            borderColor:"white",
                        },
                        title: { //X軸のタイトルを入れる場合
                            display: true,
                            text: 'サンプルプロット数',
                            color: 'white',
                            font: {
                                size: 16
                            }
                        }, //X軸のタイトルを入れる場合--end--
                    },
                    y: {
                        min: 0,
                        max:30,
                        ticks: {
                            display: true,
                            color:"white",
                        },
                        grid:{
                            color:"gray",
                            borderDash: [2,2],
                            borderWidth: 1,
                            tickColor:"white",
                            borderColor:"white",
                        },
                        title: { //Y軸のタイトルを入れる場合
                            display: true, //ｙ軸のタイトルを表示するか
                            text: 'サンプルデータ値',
                            color: 'yellow',
                            font: {
                                size: 16
                            }
                        }, //Y軸のタイトルを入れる場合--end--
                    }
                }
           }
        });
    </script>
</body>
</html>