javascript - Morris.js, line graph showing wrong data -

i creating line graph using morris.js , javascript. here code:

morris.area({    element: 'hero-area',    data: [        { day: "thu", reward: 0, redeem: 0 },        { day: "fri", reward: 2, redeem: 0 },        { day: "sat", reward: 1, redeem: 0 },        { day: "sun", reward: 0, redeem: 0 },        { day: "mon", reward: 0, redeem: 0 },        { day: "tue", reward: 1, redeem: 2 },        { day: "wed", reward: 0, redeem: 0 }    ],    xkey: 'day',    ykeys: ['reward', 'redeem'],    labels: ['reward', 'redeem'],    // later on    parsetime: false,    hidehover: 'auto',    linewidth: 1,    pointsize: 5,    linecolors: ['#4a8bc2', '#ff6c60'],    fillopacity: 0.5,    smooth: false }); 

i passing array js, , getting graph:

please check tuesday graph. value of redeem 2 in array in graph showing 3, wrong. did make mistake?

there no mistakes in code, default behaviour. areas stacking above each other, value 3, because reward + redeem = 3. if want them overlay, can use behavelikeline option. set true , want.

morris.area({   element: 'hero-area',   data: [{     day: "thu",     reward: 0,     redeem: 0   }, {     day: "fri",     reward: 2,     redeem: 0   }, {     day: "sat",     reward: 1,     redeem: 0   }, {     day: "sun",     reward: 0,     redeem: 0   }, {     day: "mon",     reward: 0,     redeem: 0   }, {     day: "tue",     reward: 1,     redeem: 2   }, {     day: "wed",     reward: 0,     redeem: 0   }],   xkey: 'day',   ykeys: ['reward', 'redeem'],   labels: ['reward', 'redeem'],   // later on   parsetime: false,   hidehover: 'auto',   linewidth: 1,   pointsize: 5,   linecolors: ['#4a8bc2', '#ff6c60'],   fillopacity: 0.5,   smooth: false,   behavelikeline: true });