I am using the dc-js library to display a line chart. As far as I can tell, everything works well. The chart is even mostly displayed correctly. However, in addition to the line I want on the chart, there is a black line that sits behind the blue one, filled with black. The black line represents one linear increase from the first value to the last value.

Here is my code:
var stripeData = <Data>;
var mrrLineChart = dc.lineChart("#line-chart");
var data = [];
stripeData.forEach(function (dat) {
data.push({date: parseDate(dat.created.substr(0, 10)), amount: dat.amount});
});
var ndx = crossfilter(data);
var dateDim = ndx.dimension(function(d) {
return d.date;
});
var amount = dateDim.group().reduceSum(function(d) { return +d.amount; });
var minDate = dateDim.bottom(1)[0].date;
var maxDate = dateDim.top(1)[0].date;
mrrLineChart.width(960)
.height(150)
.margins({top: 10, right: 50, bottom: 50, left: 50})
.dimension(dateDim)
.group(amount, "Amount")
.transitionDuration(500)
.brushOn(false)
.renderArea(true)
.renderDataPoints(true)
.title(function(d){
return (d.key.getMonth()+1) + "/" + d.key.getDate() + "/" + d.key.getFullYear() + "\nAmount: $" + d.value.toFixed(2);
})
.elasticY(true)
.x(d3.time.scale().domain([minDate,maxDate]))
.xAxisLabel("Date")
.yAxisLabel("Revenue")
.render()
;
The idea is to group transactions by day and summarize revenue per day.
source
share