Chartjs-Using epoch as time series on x axis in react-chartjs-2 not showing correct date

by

-1👍

As you wrote, “multiplying the epoch by 1000 to get milliseconds” should do the trick.

I made a runnable snippet out of the few epoch values you provided. The relevant line is the following:

labels: epochs.map(e => e * 1000),

To me, the result looks fine. 

const epochs = [1568160683.5443,1568161754.43038,1568162825.31646,1568163896.20253];
const values = [2, 3, 1, 2];

var canvas = document.getElementById('myChart');
new Chart(canvas, {
    type: 'line',
    data: {
        labels: epochs.map(e => e * 1000),
        datasets: [{
            label: 'My Dataset',
            data: values,
            fill: false,
            borderColor: 'red',
        }]
    },
    options: {
        responsive: true,
        legend: {
            display: false
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }],
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'minute'
                }
            }]
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>

Leave a comment