Questions & Answers

I'm building a dashboard using dc.js/d3.js/crossfilter/bootstrap but I'm stuck on building a row chart, which is the only one from all of my charts that came up with this error (yes, styles doesn't have conflicts on other kinds of charts).

Here is the jsfiddle with the exact same scenario. The problem is that all the rows are rendering with the same length, even when the group is being calculated correctly (you can check it doing groupB.all() on terminal).

The source of the problem, which I found out after multiple headaches, is that bootstrap's styles overrides rect tags width. See the pictures where the problem goes away unchecking the width attribute on the .row>* selector's class.

I couldn't solve this. I tried writing styles to override it using width: revert, width: initial and even tried using jQuery to remove that attribute after render, but cannot get it to work. It seems that none of these methods are exactly the same than unchecking the attribute definition on Chrome inspector.

I can't change any library version due it is a large project and has other dashboards already built with this same stack.