React/DC.js - Chart Resizing (based on window size)

user_12728698 0
Viewed 168

I'm trying to resize a couple dc.js charts based on the window size, and I found there are some examples in the DC.js knowledgebase, where one in particular deals with resizing canvas elements.

When I implement, the chart resizes vertically by (debugging suggests) 2 pixels, infinitely.

resize issure

My guess is this React/DOM collision, and I can squelch the issue by adding the following to the chart styling (unfortunately not a solution in my case):

...
.style('position', 'absolute')
.style('left', 0)
.style('top', 0);
...

Here's a working stackblitz

P.S. I tried to implement in this in the chartTemplate.tsx but I get a strange typing error:

Property 'height' does not exist on type 'number | PieChart'.
Property 'height' does not exist on type 'number'.(2339)

Ultimately, for brevity, I'd like to implement in the template once (rather than each chart file), but I'm unsure whether this is a typing issue for DC.js (as I've run into a few definition errors) or an error in my implementation

dc.js typescript reactjs css html
1 Answers

Setting

.width(null)

or

.height(null)

tells dc.js to use the width or height of its div. In this case, you don't have anything constraining the height of the chart div, so by default CSS box rules, it sizes to fit a little bit bigger than the SVG, and you end up in an infinite loop.

It is possible to futz with CSS rules to get the chart div the same height as the SVG, but I don't think it's worth it, since it doesn't look like you want automatic height sizing here.

If you're just trying to get the charts to fill the width of the window, you should only set

 .width(null)

and leave the height at some constant.

If you want the chart to stretch vertically, you could use CSS Flexbox like in the example you started with, or CSS Grid is another good option. Anything that constrains the height of the chart div (tables, constant height) will be safe with .height(null), but yeah it has issues when the div is expecting to resize around the SVG. :)

user_6761950
Related