Dc.js Filling an area with a gradient

Question

I want to fill the area of a line chart with a gradient, so that the bottom of the gradient is transparent. How can we do that?

cumulativeChart /*dc.lineChart('#cumulative-chart', 'chartGroup')*/
    .width(width_block1)
    .height(width_block1/3)
    .transitionDuration(1000)
    .margins({top: width_block1/30, right: width_block1/20, bottom: width_block1/40, 
    left: width_block1/25})
    .dimension(moveMonths)
    .mouseZoomable(true)
    .rangeChart(AUMChart)
    .x(xScale)
    .y(yScale)
    .round(d3.timeMonth.round)
    .xUnits(d3.timeMonths)
    .elastic(false)
    .renderHorizontalGridLines(true)
    .legend(new dc.Legend().x(800).y(10).itemHeight(13).gap(5))
    .brushOn(false)
    .title( function(d) { return dateFormat(d.key) + ': ' + numberFormat(d.value);
        })
    .valueAccessor(function (d) { return d.value})
     .compose([
        dc.lineChart(cumulativeChart).group(fdValue, data[0].name)
            .ordinalColors([palette_color_block1[0]])
            .renderArea(true),
        dc.lineChart(cumulativeChart).group(bchkValue, data[0].bchk_name)
            .ordinalColors([palette_color_block1[1]]),
        dc.lineChart(cumulativeChart).group(idxValue, data[0].idx_name)
            .ordinalColors([palette_color_block1[2]])
    ]);