Chartjs-My ChartJS dates don't show up correctly from coinranking API

by

0👍

If you use ChartJS V.3 ->

First your should add a date adapter, if you use date-fns or moment there is an adapter for each one example :

import {
        Chart as ChartJS,
        LinearScale,
        PointElement,
        LineElement,
        Tooltip,
        Filler,
        TimeScale,
    } from 'chart.js'
    
    import "chartjs-adapter-moment"
    
    ChartJS.register(
        LinearScale,
        TimeScale,
        PointElement,
        Filler,
LineElement,
    Tooltip,
)

Then you have to add the Time format in your xAxes Options :

  x: {
                    type: 'time',
                    time: {
                        unit: "day",
                        displayFormats: {
                            day: "MMM DD YYYY" // or whatever you want to display your date
                        }
                    },
}

If you use ChartJS V2:

Don’t install the adapter, it’s not necessary but add in your Scales Options :

xAxes: [
                    {
                        // stacked: true,
                        type: 'time',
                        time: {
                            unit: 'day',
                            displayFormats: {
                                day: 'MMM DD YYYY'
                            }
                        },
                    },
                ],

0👍

You just have to make a minor change while pushing dates into timeStamp array.
Do this

coinTimeStamp.push(new Date(coinHistory.data.history[i].timestamp*1000).toLocaleDateString());

You need to multiply the timestamp by 1000.

Leave a comment