[Chartjs]-Time scale formatting issues with chartjs, mostly unitStepSize

by

6👍

After struggling with this same issue myself for longer than I should have, I finally noticed the fine print in the Chartjs documentation at http://www.chartjs.org/docs/#scales-time-units The unitStepSize parameter needs to be defined in the time sub options.

I was doing: 

 scales: {
                xAxes: [{
                    type: "time",
                    time: {
                        unit: 'day',
                        displayFormats: {
                            day: 'MMM DD',
                        },
                    },
                    ticks: {
                        fontColor: "black",
                        fontSize: 12,
                        fontStyle: "normal",
                        fontFamily: "Segoe UI",
                    },
                    unitStepSize: 7,
                }],
                yAxes: yAxes
            },

When I should have been doing:

 scales: {
                xAxes: [{
                    type: "time",
                    time: {
                        unit: 'day',
                        displayFormats: {
                            day: 'MMM DD',
                        },
                        unitStepSize: 7,
                    },
                    ticks: {
                        fontColor: "black",
                        fontSize: 12,
                        fontStyle: "normal",
                        fontFamily: "Segoe UI",
                    },
                }],
                yAxes: yAxes
            },

In a broader context: (note that eleChart1 is the canvas DOM element of the chart, and that yAxis, datasets, and ChartName are objects/variables built outside of the example.)

var Chart1 = new Chart(eleChart1, {
        type: 'line',
        lineWidth: 15,
        data: {
            datasets: datasets,
        },
        options: {
            showPointLabels: true,
            legend: {
                display: true,
                //position: "bottom"

            },
            title: {
                display: true,
                text: ChartName,
                fontSize: 18,
                fontStyle: "bold",
                fontFamily: "Segoe UI"
            },
            scales: {
                xAxes: [{
                    type: "time",
                    time: {
                        unit: 'day',
                        displayFormats: {
                            day: 'MMM DD',
                        },
                        unitStepSize: 7,
                    },
                    ticks: {
                        fontColor: "black",
                        fontSize: 12,
                        fontStyle: "normal",
                        fontFamily: "Segoe UI",
                    },
                }],
                yAxes: yAxes
            },
        }
    });

Bottom line: Once I put the unitStepSize option in the time object, it worked as expected.

Leave a comment