Morris line chart y axis going beyond 100%

Viewed 1169

I am using Morris line chart but my y axis is going beyond 100%.

Below is my json data:

[
  {"y":"20/03","Threshold":"70","x TV":"0","x CA":"100","x Retail":"0","x Mobility":"100","x Media":"0"},
  {"y":"21/03","Threshold":"70","x TV":"100","x CA":"87.69","x Retail":"100","x Mobility":"70","x Media":"86.67"},
  {"y":"22/03","Threshold":"70","x TV":"0","x CA":"87.5","x Retail":"100","x Mobility":"93.42","x Media":"82.14"},
  {"y":"23/03","Threshold":"70","x TV":"0","x CA":"0","x Retail":"0","x Mobility":"0","x Media":"0"},
  {"y":"24/03","Threshold":"70","x TV":"0","x CA":"0","x Retail":"0","x Mobility":"0","x Media":"0"},
  {"y":"25/03","Threshold":"70","x TV":"0","x CA":"0","x Retail":"0","x Mobility":"0","x Media":"0"},
  {"y":"26/03","Threshold":"70","x TV":"0","x CA":"0","x Retail":"0","x Mobility":"0","x Media":"0"}
]

Please find below Morris line chart code:

Morris.Line({
    element: 'morris-line-chart',
    data: jsonData,
    xkey: 'y',
    xLabels: 'day',
    ykeys: ['x TV', 'x CA', 'x Retail', 'x Mobility', 'x Media', 'Threshold'],
    ymax: 100,
    ymin:0,
    labels: ['x TV', 'x CA', 'x Retail', 'x Mobility', 'x Media', 'Threshold'],
    hideHover: 'auto',
    resize: false,
    parseTime: false,
    lineColors: ['#C91530', '#871A35', '#E25D00', '#8EADB8', '#F2A200', '#D4D4D4'],
    //yLabelFormat: function (y) { return y.toString(); },
    postUnits: '%'
});

For date 21/03 and 22/03 x Retail has value as 100% my observation that path element not drawing the straight line.

1 Answers
Related