Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive #1093

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

Responsive #1093

wants to merge 3 commits into from

Conversation

christophe-g
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor Author

@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:
screenshot from 2016-02-09 18 37 46
to this - when the container changes its size (here from 100x100 into 800x600):
image

C.

@alan-unravel
Copy link
Contributor

alan-unravel commented May 26, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants