javascript - Morris line chart is not working properly

Question

I created this simple line chart using morris.js. But it is not showing data properly. I don't know why? Please check it at js fiddle.

Js fiddle: link

new Morris.Line({
    element: 'multi-line-mp',

    data: [
        {
            day: 'Jan 1',
            sales: '0',
            purchases: '1'
        },
        {
            day: 'Jan 2',
            sales: '14',
            purchases: '3'
        },
        {
            day: 'Jan 3',
            sales: '45',
            purchases: '0'
        },
        {
            day: 'Jan 4',
            sales: '47',
            purchases: '32'
        },
        {
            day: 'Jan 5',
            sales: '90',
            purchases: '10'
        }        
    ],

    xkey: 'day',
    ykeys: ['Sales', 'Purchases'],
    labels: ['Sales', 'Purchases'],
    resize: true
});

question from:https://stackoverflow.com/questions/65847853/morris-line-chart-is-not-working-properly

Answer 1

The date format of your xkey (day) is not good, this is rather a string than a real date.

You have 2 choices:

1. change the format of the xkey to be a real date (like 2021-01-01 instead of Jan 1)
2. set the option parseTime to false, so that it won't try to format the string to be a date

In case you change the format of xkey, you still can change the way the date is displayed thanks to the function dateFormat (see the documentation for this here: http://morrisjs.github.io/morris.js/lines.html)