CODEWITHSUNDEEP
javascriptcssd3.jssvgscale
SoftTimur
SoftTimur

Reputation: 5490

Make the size of a chart adjust to its outer container

I want to embed this choropleth in my webpage. Here is a working plunker.

Currently, the size of SVG is fixed by <svg width="960" height="600"></svg>. If we change it to eg, <svg width="200" height="200"></svg>, we will see the map is partially shown, and the real scaling of the map does not change.

However, I want to make this chart always adjust to the size of its outer container. For example, in the case of this plunker, I want the width of the chart to be the same as the one of the right panel.

Does anyone know how to modify the d3 code to achieve this?

PS: Another possibility is to leave <svg width="960" height="600"></svg> with it, but scale/compress the whole svg to adapt the width of its outer container. I don't know if it is doable...

Upvotes: 0

Views: 50

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

Unfortunately it is impossible to style the contents of an <iframe> unless you have control over the page loaded in the <iframe>, due to cross-domain resource restrictions.

You would need to style the SVG on the page that you are including:

svg {
  max-width: 100%;
  max-height: 100%;
}

If you don't have access to that page, then you are limited to styling the <iframe> element itself.

Hope this helps! :)

Upvotes: 1

Related Questions