d3pie
d3pie copied to clipboard
Chart Responsiveness
Hello, first and most importantly, thank you for such an amazing tool its been really useful. Do you have any plans on adding chart responsiveness? Or could you tell me how can I achieve this? The chart right now is based on a fixed size that doesn't rely on the container it is being binded to. Many sites are based on responsive design and a tool like yours could be really useful if it could be responsive. Thank you!
+1 on this. Most sites these days are either responsive or have a mobile component, so this is pretty important. Perhaps the ability to set the width to an "auto" size.
One simple solution (for anyone looking) is to just detect a window resize and redraw the chart with a new height. Something like this (using underscore to debounce the resize event):
$(window).resize(_.debounce(=> pie.options.canva.width = $('#pie-chart').width() pie.redraw() , 500));
Agreed. It would be nice to have an option to automatically fit within the parent element's width and height.
.containing-element svg {
height: auto;
max-width: 100%;
}
works for me. Thing is, depending on how many slices there, it's not exactly "usable" on a small screen. But that should at least contain it.
I would think this to be a priority feature. I tried using the workaround above posted by @willthemoor to no avail. If someone could go more in depth on a workaround to this issue I would appreciate it.