Responsive

[christophe-g]

added responsive capabilities to dc charts.

It works by playing with viewBox attributes and a couple of css tricks. A new example is added (bar-responsive.html) to see it in action.

Cheers,
C.

[gordonwoodhull]

Thanks @christophe-g.

It's important functionality, but oh boy, there are a lot of ways to do this, and we halfway support two other ways:

• setting width/height to null reads the dimensions from the parent div
• you can set up a resize handler and set width/height, as demonstrated in the examples here: http://dc-js.github.io/dc.js/resizing/

I take it with your solution, the chart is not actually aware of the resize, but the svg just gets stretched using the viewBox? Do the fonts end up stretched and do lines end up different thickness?

[christophe-g]

@gordonwoodhull
Thanks for the answer - agree there are many ways to to this - and I am not sure which is the best option!

I take it with your solution, the chart is not actually aware of the resize, but the svg just gets stretched using the viewBox? Do the fonts end up stretched and do lines end up different thickness?

You are right - with this approach, the chart layout is not re-calculated. It only uses viewBox + css to fit the chart to its container (the ration is kept, it fits either to max-width or max-height).

In short, you go from this:

to this - when the container changes its size (here from 100x100 into 800x600):

C.

[alan-unravel]

You could also add the preserveAspectRatio when using responsive mode, so at least the ratio of height to width would stay the same.