gampleman / elm-visualization

A data visualization library for Elm

Home Page:http://package.elm-lang.org/packages/gampleman/elm-visualization/latest/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Size graph to parent element

entone opened this issue · comments

I'm working on a responsive design, and I'd really like to have the graph's width adjust based on the view port. I'm currently not aware of a way to get a DOM element's width in Elm, and the scales appear to require a hard width to render correctly.

Do you have any ideas or workarounds for this?

My hope is that this will eventually make it into elm-lang/dom.

Until then, the one workaround is to use responsive SVGs. This is a major pain to deal with. The only thing I managed to get working is something like this:

http://stackoverflow.com/questions/38018204/svg-scaling-for-line-chart

Then use scales with range of (0, 100) and post-process the values to add a percentage symbol after them.

I'm hesitant to recommend this approach, because it makes it very difficult to work with the chart and I ended up making a hard coded chart and simply changing the hardcoded size based on the viewport width.

You could of course use ports to get the width.

Hope this helps.