ChartJS Generate Date Format

Question

I'm using ChartJS to generate a temperature graph where the X axis is the date. But I'm not able to correctly format this data in YYYY/MM/DD format.

My Weatherdata

"weatherdata_history": [
            {
                "id": 70,
                "weatherdata_type_id": 2,
                "area_id": 1,
                "date": "2021-07-25T00:00:00.000Z",
                "temp_min": 9.25,
                "temp_max": 23.28,
                "temp_avg": 14.8721,
                "feels_like_min": 8.39,
                "feels_like_max": 22.69,
                "feels_like_avg": 14.1175,
                "pressure_min": 1015,
                "pressure_max": 1021,
                "pressure_avg": 1018.67,
                "humidity_min": 38,
                "humidity_max": 82,
                "humidity_avg": 64.125,
                "dew_point_min": 4.67,
                "dew_point_max": 11.22,
                "dew_point_avg": 7.48292,
                "uvi_min": 0,
                "uvi_max": 5.39,
                "uvi_avg": 1.16333,
                "clouds_min": 0,
                "clouds_max": 20,
                "clouds_avg": 2.95833,
                "visibility_min": 10000,
                "visibility_max": 10000,
                "visibility_avg": 10000,
                "wind_speed_min": 1.64,
                "wind_speed_max": 3.81,
                "wind_speed_avg": 2.47833,
                "wind_deg_min": 1,
                "wind_deg_max": 356,
                "wind_deg_avg": 141.542,
                "wind_gust_min": 1.85,
                "wind_gust_max": 11.91,
                "wind_gust_avg": 4.74042,
                "rain_min": 0,
                "rain_max": 0,
                "rain_avg": 0,
                "snow_min": 0,
                "snow_max": 0,
                "snow_avg": 0,
                "createdAt": "2021-07-28T18:13:19.000Z",
                "updatedAt": "2021-07-28T18:13:19.000Z"
            }
            ...
        ]
    }

Data for ChartJS are:

     const temp_data = {
            labels: this.props.weatherdataDetails.weatherdata_history.map(e => e.date),
            datasets: [
                {
                    label: 'min',
                    data: this.props.weatherdataDetails.weatherdata_history.map(e => e.temp_min),
                    fill: false,
                    backgroundColor: 'rgb(4, 209, 158)',
                    borderColor: 'rgba(4, 209, 158, 0.2)',
                },
            ],
        };

Options for ChartJS are:

const temp_options = {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: 'Temperature Day'
                },
                legend: {
                    display: true,
                }
            },
            scales: {
                x: {
                    display: true,
                    type: 'time',
                    time: {
                        unit: 'day',
                        displayFormats: {
                            day: 'dd MMM yy',
                        },
                    },
                    title: {
                        display: true,
                        text: 'Data observations'
                    }
                },
                y: {
                    display: true,
                    title: {
                        display: true,
                        text: 'Temperature (˚C)'
                    },
                    suggestedMin: -10,
                    suggestedMax: 50
                }
            }
        };

This chart is generated correctly, but the date information is displayed incorrectly. The data that are coming from the database, of data, are in ISO8601 format, but they are not displayed on the map, as we can see in the image below. The first temperature data I have is day "date": "2021-07-25T00:00:00.000Z", but the graph shows "date": "2021-07-26T00:00:00.000Z".

Image1

Answer 1

The problem is your locale. here is a nice fiddle to demonstrate the problem: fiddle

The starting date given is 2021-11-16T00:00:00.000-22:00 but the first item on the graph shows the next day at midnight. This is because we gave the "-22:00" locale to our date parser. if you give it "-08:00" we get 8 AM on the same day, so we are a bit closer to the correct value. If i give no locale to the parser, i get the correct locale automatically, but i guess you need to give the correct locale manually, or you have the wrong locale set on your machine.