Chart JS date-hour AxesX

Question

I would like to display somes data from JSON :

[{"heure":"08:00:00","date":"2017-08-09","payload":"1"}]

And I use Chart JS to build a chart :

for(var i in data) {
                heure.push("Heure " + data[i].heure);
                date.push(data[i].date);
                payload.push(data[i].payload);
            }

            var chartdata = {
                labels: date,
                datasets: [
                    {
                        label: nomGraph,
                        fill: false,
                        lineTension: 0.1,
                        backgroundColor: "rgba(59, 89, 152, 0.75)",
                        borderColor: "rgba(59, 89, 152, 1)",
                        pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
                        pointHoverBorderColor: "rgba(59, 89, 152, 1)",
                        data: payload
                    }
                ]
            };
            var option = {
                scales: {
                    yAxes:[{
                        stacked:true
                    }],

                    xAxes: [{
                        type: 'time',
                        position: 'bottom',
                        time: {
                            tooltipFormat: "MM-DD-YYYY",
                        },
                    }],
                }
            };

            var ctx = $("#mycanvas");

            var LineGraph = new Chart(ctx, {
                type: 'line',
                data: chartdata
            });

The problem is that I can not display a good scale on the X axis. I have 2017-08-09 or I would like 08-09-2017 thanks to this line:

tooltipFormat: "MM-DD-YYYY",

And the best would be to display Aug 09 10H with the time variable.

tooltipFormat: "MMM-DDD-HHHH",

But it does not work. Do you know why?

Answer 1

Chart js uses moment.js time formatters to format the tooltip string. So I think the moment format tokens should work. Read more about here.
https://momentjs.com/docs/#/displaying/format/

If the date is 2017-01-29 10:00:00 AM ,

MMM-DD-HH will equivalent to Jan-29-10

But I don't see any HOUR part in your date string. If you want the hours to be formatted you should input the date string in the following standard way with time data.

2013-02-04T22:44:30.652Z

There are several ISO standards available. You can choose one. Read more about here. https://momentjs.com/docs/#/displaying/as-iso-string/