title: Why are black areas being renderd both above and below the line graph?
body: <p>I have three charts rendering using dc.js and all of them render a black area below or above the line. I looked through the dc.css file for any fill options that were relevant, but I couldn't find any that had a positive effect.</p>
  
  <p><img src="https://i.stack.imgur.com/XmtYS.png" alt="Here is an image of how it looks"></p>
  
  <p>I', using Angular 7 as the framework to develop my application.
  Json Data is in this form and has a few different device types:</p>
  
  <pre><code>{
  device_ID: "DHT11-3fe381"
  ​​​​
  device_type: "thermometer"
  ​​​​
  time: "2019-02-26T00:56:54.000Z"
  ​​​​
  value: 25.9
  }
  </code></pre>
  
  <p>I use crossfilter to create a <code>timeDim</code> dimension and sort each value according to <code>device_type</code>: </p>
  
  <pre><code>    const timeDim = ndx.dimension((d) =&gt; d.time);
  
      var Thermo = timeDim.group().reduceSum((d) =&gt; {
        if (d.device_type === 'thermometer' &amp;&amp; d.value &lt;= 40) {
          return d.value;
        } else {
          return 0;
        }
      });
  </code></pre>
  
  <p>Then, I create my graphs: </p>
  
  <pre><code>const DTchart = dc.compositeChart('#graphT');
  
      DTchart
        .width(800)
        .height(300)
        .margins({top: 10, right: 50, bottom: 100, left: 60})
        .dimension(timeDim)
        .group(device, 'value')
        .xUnits(d3.timeMinutes)
        .x(d3.scaleTime().domain([bottomDate, topDate]))
        .yAxisLabel('Thermometer reading')
        .xAxisLabel('Time')
        .brushOn(false)
        .elasticX(true)
        .elasticY(true)
        .controlsUseVisibility(true)
        .renderHorizontalGridLines(false)
        .compose([
          dc.lineChart(DTchart)
            .dimension(timeDim)
            .renderArea(false) // This didn't contribute anything
            .colors('RED')
            .group(Thermo) 
            .valueAccessor((d) =&gt; d.value)]
        );
  </code></pre>