[Chartjs]-React-chartjs-2 time scale dates not formatting

by

3👍

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.

Leave a comment