score: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.


Related Query

More Query from same tag