Chart.jsを使ってランニングのペースをグラフ化する

index.html

<div>
    <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    const ctx = document.getElementById('myChart');

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar'],
            datasets: [{
                label: 'pace per kilometer',
                data: [264, 261, 251],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    reverse: true, // 大きいものから小さいものに
                    ticks: {
                        // 秒の値を分:秒の形式にする
                        callback: function(value, index, values) {
                            var minutes = Math.floor(value / 60);
                            var seconds = value % 60;
                            return minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
                        }
                    }
                }
            }
        }
    });
</script>