react-chartjs-2 time scale dates not formatting

Question

I'm just getting up to speed with chart.js in react. I'm having problems with getting the dates to format. Here is my code:

var data = {
    labels: labelArray,
    title: {
        text: "Date Time Formatting"
    },
    datasets: [{
        label: 'Temperature',
        data: dataArray,
        tension: 0,
        borderColor: "rgb(248,169,113)",
        backgroundColor: "rgba(0,0,0,0)",
        radius: 0,
        borderWidth: 1,
        pointHitRadius: 5
    }]
};
var options = {
    title: "This is a test",
    xAxes: {
        title: "time",
        gridThickness: 2,
        unit: "day",
        unitStepSize: 1000,
        type: 'time',
        time: {
            displayFormats: {
                millisecond: 'MMM DD',
                second: 'MMM DD',
                minute: 'MMM DD',
                hour: 'MMM DD',
                day: 'MMM DD',
                week: 'MMM DD',
                month: 'MMM DD',
                quarter: 'MMM DD',
                year: 'MMM DD',
            }
        }
    }
}
class LineExample extends(Component) {
    componentWillMount() {
        let json = getJSONObject();
    }
    render() {
        // console.log ("Labels: " + labelArray);
        return (<div>
            <h2>Line Example</h2>
            <Line data={data} options={options}/>
        </div>);
    }
};
class LineExample extends(Component) {
    componentWillMount() {
        let json = getJSONObject();
    }
    render() {
        // console.log ("Labels: " + labelArray);
        return (<div>
            <h2>Line Example</h2>
            <Line data={data} options={options}/>
        </div>);
    }
};

It seems that the options may not be working properly (but that is just a guess).

Here is the output and the dates on the x-axis are the full date time string. Here is a picture:

Answer 1

According to renderChart method of react-chartjs-2 (https://github.com/gor181/react-chartjs-2/blob/master/src/index.js), the options prop is passed to Chart directly to create an instance. When you pass options to chartjs, the scale-related options need to be nested under the key scales, then under time and gridLines keys respectively. like this

 var options = {
        title: {text: "This is a test"},
        scales: {
            xAxes: [{
                title: "time",
                type: 'time',
                gridLines: {
                    lineWidth: 2
                },
                time: {
                    unit: "day",
                    unitStepSize: 1000,
                    displayFormats: {
                        millisecond: 'MMM DD',
                        second: 'MMM DD',
                        minute: 'MMM DD',
                        hour: 'MMM DD',
                        day: 'MMM DD',
                        week: 'MMM DD',
                        month: 'MMM DD',
                        quarter: 'MMM DD',
                        year: 'MMM DD',
                    }
                }
            }]
        }
    }

You may need to adjust unitStepSize if you plan to use 'day' as unit.