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

Question

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.

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

Gordon · Accepted Answer · 2020-11-29 13:57:06Z

2

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. :)

edited Nov 29, 2020 at 13:57

answered Nov 29, 2020 at 5:25

Gordon

20.2k4 gold badges39 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

joshp Over a year ago

thanks! Also, do you know how the typings for DC.js were generated? I still get the following errors Argument of type 'null' is not assignable to parameter of type 'number'.ts(2345) and Property 'rescale' does not exist on type 'number | (number & PieChart)'. which I can really only get rid of with @ts-ignore... I was thinking of commit the errors I've found to DefinitelyTyped, but I'm relatively new to typescript and don't want to make the problem worse than it is :P

Gordon Over a year ago

The typings are not automatically generated - I’m not sure if that’s possible with any accuracy. They are maintained by the community at DefinitelyTyped. If you find any mistakes, please contribute there. They have a good review system and tend to be very responsive.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related