Chartjs-Insert hour minutes and second in the vertical axes chart.js

by

0👍

First of all, I’ve upgraded to the latest version 2. Also, the callback option should be a callback (function), and your options wasn’t precise.
I took example from the version 2 docs

let arrtempi = ["00:21:30", "01:33:40", "00:00:16", "00:24:30", "00:23:30", "00:00:20", "00:01:00", "00:01:00", "00:00:17", "00:00:17", "00:00:14", "00:00:14", "00:00:14", "00:00:10", "00:00:16", "00:00:17", "00:00:19", "00:00:18", "00:35:20", "00:35:20"];
let arrDate = ["2023-06-13", "2023-04-29", "2023-06-13", "2023-07-03", "2023-07-11", "2023-07-12", "2023-07-27", "2023-07-27", "2023-07-27", "2023-07-27", "2023-07-28", "2023-07-28", "2023-07-28", "2023-07-27", "2023-07-20", "2023-07-28", "2023-07-28", "2023-07-20", "2023-08-08", "2023-08-08"];

function formatSeconds(seconds) {
  return new Date(seconds * 1000).toISOString().substr(11, 8)
}

function mostraGrafico() {
  let arrtempiSec = arrtempi.map(function(e) {
    e = e.split(":");
    e = e[0] * 3600 + e[1] * 60 + e[2];
    return e;
  });
  new Chart(idgTempoSforzo, {
    type: "line",
    data: {
      labels: arrDate,
      datasets: [{
        data: arrtempiSec,
        borderColor: "green",
        fill: false,
        pointRadius: 4,
      }],
    },
    options: {
      responsive: true,
      legend: {
        display: false
      },
      scales: {
        yAxes: [{
          ticks: {
            callback: formatSeconds
          }
        }]
      }

    }
  })

}

mostraGrafico()
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="idgTempoSforzo"></canvas>

Leave a comment