Chartjs-Can't display proper time on chart.js timeline

by

1👍

✅

I believe you’re looking for DD-MM-YYYY HH:mm:ss See moment.js for a list of allowable format tokens (chart.js uses the same formats which is specified here).

MM is for months (as you’re using currectly in the DD-MM-YYYY section and SS is for fractional seconds. I dont think you are wanting either of those to display the time (could be wrong about that on the fractional seconds but definitely not months being the minutes)

If you’re wanting your labels to have the time on them as well then you can use:

`type: "time",
time: {
   displayFormats:{ timeFormat },
   min: new Date(2001, 1, 4, 1, 0, 0, 0),
},`

Both of these solutions combined yield the following chart:

function factorData(data) {
  let _data = data.map((e, i, a) => {
    let prev = a[i - 1];
    let next = a[i + 1];
    if (e === prev && e === next) return '' + e;
    return e;
  }).map(e => typeof e === 'string' ? null : e);
  return _data;
}

var ctx = document.getElementById('chart').getContext('2d');

var gradient1 = ctx.createLinearGradient(0, 0, 0, 400);
gradient1.addColorStop(0, 'rgba(14, 22, 38, 1)');
gradient1.addColorStop(1, 'rgba(1, 103, 147, 0.7)');
/***************/

/* var datas = [];
var labelss = [];
var quantity = 50;
for (var i = 0; i < quantity; i++) {
  var test = Math.floor((Math.random() * 100) + 1);
  datas.push(test);
  labelss.push(i);
} */

var datas = [];
datas.push({x: "01-04-2001 10:05:46", y: 175});
datas.push({x: "01-10-2002 10:15:46", y: 140});
datas.push({x: "01-07-2003 11:47:26", y: 98});
datas.push({x: "01-10-2003 01:07:42", y: 130});
datas.push({x: "01-09-2006 06:55:46", y: 164});
datas.push({x: "01-04-2013 10:22:35", y: 178});
datas.push({x: "01-10-2015 10:05:46", y: 118});
datas.push({x: "01-10-2018 10:05:46", y: 158});


var timeFormat = "DD-MM-YYYY HH:mm:ss";

var options = {
  type: 'line',
  data: {
    //labels: labelss,
    datasets: [{
      fillColor: gradient1,
      backgroundColor: gradient1,
      borderColor: gradient1,
      fill: 'origin',
      strokeColor: gradient1,
      pointBackgroundColor: "#00b2ff",
      pointRadius: 2,
      pointBorderWidth: 0,
      pointHoverRadius: 3,
      pointHoverBackgroundColor: "rgba(0, 178, 255, 1)",
      data: datas,
      steppedLine: true,
      spanGaps: true
    }, ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    datasetStrokeWidth: 1,
    pointDotRadius: 3,
    pointDotStrokeWidth: 1,
    pointHitDetectionRadius: 1,
    tooltipFillColor: "rgba(120,0,0,0.8)",
    tooltipFontStyle: "bold",
    animation: false,
    scaleFontColor: "#ffffff",
    scaleFontStyle: "bold",
    scales: {
      xAxes: [{
        type: "time",
        time: {
          displayFormats:{ timeFormat },
          min: new Date(2001, 1, 4, 1, 0, 0, 0)
        },
        ticks: {
          maxTicksLimit: 21,
          minRotation: 90,
          fontColor: '#ffffff'
        },

        gridLines: {
          color: "#444444"
        }
      }],
      yAxes: [{
        ticks: {
          fontColor: '#ffffff'
        },
        gridLines: {
          color: "#444444"
        },
      }]
    }
  },
}

var myLineChart = new Chart(ctx, options);

Leave a comment