To avoid displaying colors below lines, consider using a Line chart as it is more straightforward.
Morris.Line({
element: 'area-example',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});
Another option is to use the following code snippet which includes fillOpacity for filling the area below the lines:
Morris.Area({
element: 'chart',
data: [
{ y: '2015-01', a: 1, b: 2 },
{ y: '2015-02', a: 2, b: 3 },
{ y: '2015-03', a: 2, b: 2 },
{ y: '2015-04', a: 1, b: 4 },
{ y: '2015-05', a: 2, b: 5 },
{ y: '2015-06', a: 3, b: 3 },
{ y: '2015-07', a: 1, b: 2 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Value A', 'Value B'],
fillOpacity: 0.8,
hideHover: 'auto',
resize: true,
pointFillColors: ['#fff'],
pointStrokeColors: ['black'],
lineColors: ['#f1a340', '#998ec3'],
});
<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="http://cdn.oesmith.co.uk/morris-0.5.1.min.js"></script>
<link href="http://cdn.oesmith.co.uk/morris-0.5.1.css" rel="stylesheet"/>
<div id="chart"></div>
I hope this solution proves helpful. Enjoy coding! :)