Remove duplicate values from x-axis morris charts

Question

I have to render series data for current month/quarter/year data using morris.js charts. The series has data points on daily basis and I see a repeating days on the x-axis.

jsfiddle

I also tried turning off parseTime and using xLabelFormat as suggested on few posts on SO using the code below but output has duplicate values for days:

Morris.Line({
        element: element,
        data: [
            {"day":"2017-10-01 11:40:09","uniqueUsers":"180","sessions":"213"},
            {"day":"2017-10-01 12:40:09","uniqueUsers":"217","sessions":"213"},
            {"day":"2017-10-02 11:40:09","uniqueUsers":"539","sessions":"635"},
            {"day":"2017-10-03 11:40:09","uniqueUsers":"684","sessions":"826"},
            {"day":"2017-10-04 07:40:09","uniqueUsers":"1095","sessions":"1229"},
            {"day":"2017-10-04 10:40:09","uniqueUsers":"822","sessions":"987"},
            {"day":"2017-10-04 11:40:09","uniqueUsers":"568","sessions":"836"},
            {"day":"2017-10-05 11:40:09","uniqueUsers":"335","sessions":"385"}
        ],
        xkey: 'day',
        xlabels: 'day',
        xLabelFormat: function (x) {
            var d = new Date(x.label.slice(0, 10) + "T" + x.label.slice(11, x.label.length));
            return d.getDate() + ' ' + months[d.getMonth()];
        },
        ykeys: ['uniqueUsers', 'sessions'],
        labels: ['Unique users', 'User sessions'],
        pointSize: 2,
        hideHover: 'auto',
        lineColors: ['rgb(156, 39, 176)', 'rgb(121, 85, 72)', 'rgb(0, 188, 212)', 'rgb(255, 152, 0)'],
        xLabelAngle: 50,
        //dateFormat: function (d) {
        //    var ds = new Date(d);
        //    return ds.getDate() + ' ' + months[ds.getMonth()];
        //},
        behaveLikeLine: true,
        parseTime: false
    });

How can I remove duplicate values on x-axis?

Answer 1

these are not redundant values, these are dates formatted automatically by Morris.js.

Therefore, you have 2 choices:

• either do not parse the dates, and just display the value of "day", by setting parseTime to false
• or you change date format on x-axis, by setting xLabels to hour

You can read more about these settings in the documentation.