search

plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://nivo.rocks
MIT License
13.2k stars 1.03k forks source link

feature request: multiple nivo bar charts in one widget for mozaik #83

Closed knackjax closed 7 years ago

knackjax commented 7 years ago

might be my lack of understanding but it seems like charts are filling the entire div when I try to put it in mozaik. I noticed responsivewrapper code adds div width 100% and height 100%, is there a way to change this property? I would like to put three bar charts together in one widget.

thanks! we love your mozaik and nivo projects!

plouc commented 7 years ago

@knackjax, you can wrap it inside other divs, for example using a parent flexbox with 3 child divs having 33.3% width.

knackjax commented 7 years ago

@plouc thanks for the response but it doesn't seem to work. I get a blank div

https://www.webpackbin.com/bins/-KyIZNDisQjTeGdcceL2

knackjax commented 7 years ago

looks like I have to specify a concrete height, its inconvenient but I can live with that. Preferably I rather be able a height as a percentage.

plouc commented 7 years ago

Can you provide a running example with the updated approach? It should work, maybe I can help if you create a new bin on webpackbin.

knackjax commented 7 years ago

Updated example here, sorry I overwrote my original example but to replicate you just set height to a percentage and it will disappear. https://www.webpackbin.com/bins/-KylBOM-OLUpXZ8zOhY-

Thanks!

plouc commented 7 years ago

To be able to use percents, you must have something to refer to, but in your case, <html/>, <body/> and <div id="root"/> do not have any height defined, it's just a matter of adding this css rule html, body, #root { height: 100%; } => https://www.webpackbin.com/bins/-KylDtsmpHvHY7J0BT5Z

knackjax commented 7 years ago

thanks this tidbit helps, I actually use your other project mozaik (v2) in conjunction with nivo. I modified the theme to have root with height 100% and it solved my issues. Thanks again!