Dc-js line chart showing extra filled line with average change

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.

Note the black line.  I have no idea why that is showing up.

Here is my code:

var stripeData = <Data>;
var mrrLineChart  = dc.lineChart("#line-chart");
var data = [];
// console.log(stripeData);
stripeData.forEach(function (dat) {
    // console.log(dat.created);
    data.push({date: parseDate(dat.created.substr(0, 10)), amount: dat.amount});
});

// console.log(data);

var ndx = crossfilter(data);
var dateDim = ndx.dimension(function(d) { 
    return d.date; 
});
var amount = dateDim.group().reduceSum(function(d) { return +d.amount; });
// console.log(amount);
var minDate = dateDim.bottom(1)[0].date;
var maxDate = dateDim.top(1)[0].date;

// console.log(minDate);
// console.log(maxDate);

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.

+4
source share
2 answers

CSS. HTML CSS, , , :

fill: none;

CSS, SVG. dc.css, dc.js, , , , .

+3

, fill: none dc.css . :

.on('renderlet', function (chart) {
    d3.selectAll('.line')
    .style('fill', 'none')

( componentDidMount, React). index.html, https://bl.ocks.org/mbostock/1166403:

  <style>
         path.line {
         fill: none;
         stroke: green;
         stroke-width: 1.5px;
         }
  </style>

, css html.

+1

All Articles