如何使用Morris.js在单线图下添加颜色

Question

I am currently using Morris.js to draw graphs for an Android application. I pass in data that contains points for 1 single line. Donations and Dates. I am trying to add color to the bottom side of the line graph but cannot figure out how to do it.

This is the style I am trying to replicate.

But under a single line.

I have edited the Morris.js code and also passed in as many different options to Morris.Line but to no avail. This is currently the code I am using to setup the graph. I thought the 'fillOpacity' option would work but it hasn't. Is there an option that I am missing? Or is there a duplicate answer to this I have passed over?

    var xKey = "day"
    var yKey = 'funds'
    var jsonData

    var graph = Morris.Line({
            element: 'graph',
            data: jsonData,
            xkey: xKey,
            ykeys: [yKey],
            labels: ['funds gathered'],
            smooth: true,
            resize: true,
            parseTime: true,
            grid: false,
            fillOpacity: true
        });

    function setGraph(data) {
        graph.setData(data);
    }

Answer 1

Ok so the issue was that in the above example I am trying to instantiate a Morris.Line where actually what I want is a Morris.Area.

<script>
    var xKey = "day"
    var yKey = 'funds'
    var jsonData

    var graph = Morris.Area({
            element: 'graph',
            data: jsonData,
            xkey: xKey,
            ykeys: [yKey],
            labels: ['funds gathered'],
            smooth: true,
            resize: true,
            parseTime: true,
            grid: false
        });

    function setGraph(data) {
        graph.setData(data);
    }
</script>