Morris line chart y axis going beyond 100% - morris.js

Question

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.

Answer 1

The line goes beyond 100% because, by default, Morris.Line is set to draw curved lines (smooth: true). That's why, even if you don't have values greater than 100%, the line goes beyond 100%.
If you don't want to have curved lines, you can set the smooth property to false:
smooth: false
But there's no property in the latest Morris version (0.5.1) to not curve the line if the value reaches the ymax.
var jsonData = [
{ "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" }]
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,
smooth: false,
lineColors: ['#C91530', '#871A35', '#E25D00', '#8EADB8', '#F2A200', '#D4D4D4'],
//yLabelFormat: function (y) { return y.toString(); },
postUnits: '%'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>
<div id="morris-line-chart"></div>