dcjs resize

<!DOCTYPE html>
<html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.js"></script>  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.min.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css" >
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
    
    <link href="style.css" rel="stylesheet" type="text/css" media="all">

.dc-chart g.row text {
        fill: black;
        font-size: 12px;
      }
    
    </style>
  </head>

<div class="container">
          <p>Test resize with rowChart and barChart.</p>

<div class="row">
             
               <div class="col-md-6 col-sm-6 col-md-3 col-sm-3">
                  <div class="well" style="height: 400px;padding:0;">
                    <div id="chart-category">
                      <div class="filterName">Category
                            <a class="reset" href="javascript:categoryChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
                            <span class="reset" style="display: none;"></span>                        
                      </div>    
                    </div>                           
                  </div>  
                </div>

<div class="col-md-6 col-sm-6 col-md-3 col-sm-3">
                  <div class="well" style="height: 235px;padding:0;">
                      <div id="chart-index">
                          <div class="filterName">Index
                              <a class="reset" href="javascript:indexChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
                              <span class="reset" style="display: none;"></span>
                          </div>
                        </div>                             
                    </div> 
                  </div>
                </div>

</div>
          
      </div> 
    </div>

d3.csv("data.csv", function(csv) {
        
        indexNames = ["Idx 1", "Idx 2", "Idx 3"];
  
        var filter = crossfilter(csv);

var indexDimension = filter.dimension(function(d) { return +d.Index; }),
            categoryDimension = filter.dimension(function(d) { return +d.Year; });

var indexGroup = indexDimension.group(),
            categoryGroup = categoryDimension.group();

console.log("categoryGroup.all(): ", categoryGroup.all())

categoryChart //rowChart
          .width(200).height(400)          
          .dimension(categoryDimension)          
          .group(categoryGroup)         
          .title(function(d) { return d.key; });

categoryChart
            .x(d3.scale.linear().range([0,(categoryChart.width()-50)]).domain([0,3]));
        categoryChart
            .xAxis().scale(categoryChart.x()).tickValues([0,1,2,3]);

// =================
        indexChart //barChart
          .width(400).height(235)
          .margins({
            top: 10,
            right: 30,
            bottom: 30,
            left: 50
          })
          .dimension(indexDimension)
          .group(indexGroup)
          .renderHorizontalGridLines(true)
          .gap(1)
          .title(function(d, i) {            
            return d.data.value + " counts";
          })                    
          .x(d3.scale.ordinal().domain(indexNames))
          .xUnits(dc.units.ordinal) // Tell dc.js that we're using an ordinal x-axis;
          .y(d3.scale.linear().domain([0, 25]))
          .yAxisLabel("Count");

indexChart
          .yAxis().tickFormat(d3.format("d")).tickValues([0, 5,10,15,20,25]);
      
        indexChart.renderlet(function(chart) {
          // rotate x-axis labels
          chart.selectAll('g.x text')
          .attr('transform', 'translate(-10,10) rotate(315)');
        });
      
        // =================
        //dc.renderAll();

//code by @nordfjord
        let: onresize = function(){
          dc.chartRegistry.list().forEach(chart => {
            let: _bbox = chart.root().node().parentNode.getBoundingClientRect();
            chart.width(_bbox.width).height(_bbox.height).render();
          });
        };
        
        onresize();
        
        window.addEventListener('resize', onresize);

}); //end csv

</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.js

https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js