Accepted answer

The problem is your CSS.

This rule applies to every first child of any element that is inside a .line-chart-container, also to the brush overlay.

.line-chart-container :nth-child(1) {
  height: 15em;

This is also true for the :nth-child(2).

Replacing the 2 CSS height rules for the actual div elements

#line-chart-1 {
  height: 15em;
#line-chart-1-range {
  height: 2em;

removes the 2 large bars.

Also your line chart and range chart are not aligned, they have different widths and margins.

  //.width(getWidth('line-chart-1-range')) /* dc.barChart('#monthly-volume-chart', 'chartGroup'); */
  //.margins({top: 0, right: 50, bottom: 20, left: 80})
  .margins({top: 0, right: 10, bottom: 20, left: 80})
  .valueAccessor(d => d.value / circulationValuesMap[d.key])
  .x(d3.scaleTime().domain([new Date(1925, 0, 1), new Date(1927, 0, 1)]))
  .xUnits(() => 200);

All the bars have tool tips, you can't see them because the brush is catching all the mouse events. Maybe it is possible to disable tool tips for this chart

Related Query

More Query from same tag