chart.js - problems with axes options - what am I doing wrong?

Question

I'm a relative newcomer to chart.js and setting options has got me stumped...

var FV201_timestamps = [1606728594,1606728615,1606728630,1606728633,1606728654,1606728660,1606728666,1606728672,1606728675,1606728693,1606728714,1606728735,1606728753,1606728774,1606728795,1606728813,1606728834,1606728855,1606728873,1606728894,1606728915,1606728933,1606728954,1606728975,1606728993,1606729015,1606729036,1606729054,1606729075,1606729096,1606729102,1606729121,1606729142,1606729160,1606729181,1606729202,1606729220,1606729241,1606729262,1606729280,1606729301,1606729322,1606729340,1606729361,1606729382,1606729400,1606729421,1606729442,1606729460,1606729481,1606729502,1606729520,1606729541,1606729562,1606729580,1606729601,1606729622,1606729640,1606729661,1606729682,1606729700,1606729712,1606729732,1606729753,1606729774,1606729792,1606729813,1606729822,1606729842,1606729863,1606729881,1606729902,1606729923,1606729941,1606729962,1606729983,1606730001,1606730016,1606730074,1606730134,1606730194,1606730254,1606730314,1606730374,1606730434,1606730494,1606730545,1606730604];
var FV201_temps = [28.76,28.76,28.76,28.76,28.77,28.77,28.77,28.77,28.77,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.78,28.78,28.78,28.78,28.78,28.78,28.78,28.77,28.77,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.77,28.78,28.75,28.74,28.75,28.73,28.73,28.74,28.74];
    
        var FV201_ctx = document.getElementById('FV201_chart').getContext('2d');
        var FV201_cfg = {
            type: 'line',
            data: {
              labels: FV201_timestamps,
              datasets: [
                {
                  label: 'temps',
                  data: FV201_temps,
                  type: 'line',
                  fill: false
                }
              ],
              options: {
                title: {text: 'my chart', display: false},
                scales: {
                    x: {
                        type: 'time',
                        time: {
                            unit: 'second',
                            displayFormats: { second: 'hh:mm:ss' },
                            parser: function(foo) { return moment(foo,'X'); }
                        }
                    },
                    y: {
                      min: 0,
                      max: 40,
                      scaleLabel: { display: true, labelString: 'value' }
                       }
                },
              }
            }
        };
        var FV201_chart = new Chart(FV201_ctx, FV201_cfg);
        FV201_chart.update();

For the life of me I can't seem to figure out how to get my xAxis labels which are unix timestamps (seconds) to format as human readable time.

Second, I can't get the yAxis to set min and max.

I'm sure it's a simple problem that someone here will recognise immediately. I appreciate the help!

https://stackoverflow.com/questions/1322732/convert-seconds-to-hh-mm-ss-with-javascript — react_or_angluar, Dec 15 '20 at 00:12

Parikshith Kedilaya M · Accepted Answer · 2020-12-15T05:00:40.337

Here is the code:

var FV201_ctx = document.getElementById('FV201_chart').getContext('2d');
    var FV201_cfg = {
        type: 'line',
        data: {
          labels: FV201_timestamps,
          datasets: [
            {
              label: 'temps',
              data: FV201_temps,
              type: 'line',
              fill: false
            }
          ]
         },
          options: {
            title: {text: 'my chart', display: false},
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'second',
                        displayFormats: { second: 'hh:mm:ss' },
                        parser: function(foo) { return moment(foo,'X'); }
                    }
                }],
                yAxes: [{
                  ticks: {
                     suggestedMin: 28.5,
                     suggestedMax: 29,
                     stepSize: 0.1
                  }
              }]
            },
          }
    };
    var FV201_chart = new Chart(FV201_ctx, FV201_cfg);
    FV201_chart.update();

options should not be inside data object.
x and y axes should be array types.

Thanks for the code and it works for me. I was keen on not having to do a lot of reformatting of the timestamp as there will be many charts displayed and they will be constantly updated. I've been trying to get the time functionality working as per https://www.chartjs.org/docs/latest/axes/cartesian/time.html and thought I could just add a formatter but I can't seem to get that working. — blunoz, Dec 15 '20 at 04:01
@blunoz I understand now. I've updated as per their documentation. This is working for me, — Parikshith Kedilaya M, Dec 15 '20 at 04:56

chart.js - problems with axes options - what am I doing wrong?

1 Answers1