I’m trying to put a plotly.js scattergeo plot into my webpage, and I’m running into some issues. For some reason, I have no control over the size of the plot. I can make the div element as big as I want, but the plot never gets any bigger. There also seems to be a huge margin/padding around it, because I have set in my css stylesheet for the graph to be 100% width if the screen size is really small, and when I view it on mobile, it ends up being about 1 inch across, instead of taking up the entire screen like it should. Also, I cannot get it to move to the side of the page where I want it–even if I put in my stylesheet for it to be aligned left, it automatically centers itself on the page. Nowhere else in any part of my website is there any code that changes the size/alignment, so I really have no idea why it is doing this. Any thoughts?
Sounds weird.
Would you mind sharing a jsFiddle or Codepen showing what you’re trying to do.
I don’t really know how to share it, especially as I don’t know what part of the code is the problem.
I’ve fixed the alignment problem. However, the size I still cannot change. If I make the size of the element bigger, the margin just increases, but the actual size of the plot does not change. I created the plot by exactly following the Scatter Plots on Maps tutorial. The only place I declare the size is in my stylesheet. This is the only relevant code:
div.mapgraph{
width: 800px;
height:auto;
margin: auto;
}
If I increase the width, the only thing that changes is the margin. Even if I set the margin to 0px, there is still just empty white space around the map, and the actual image doesn’t get any bigger.
I guess my question is, is there anything in the plotly.js code that influences the size of the graph at all, or is this a problem somewhere in my own code, maybe with an inherited css file or something? If there isn’t anything in the plotly scripts that has anything to do with size, then the problem is somewhere on my end.
That depends what you mean by graph.
plotly.js never resizes your graph div, but our geo code does constrain the map dimensions so that the aspect ratio of the map is preserved (the extra width/height in a given graph div then becomes margins).
If you’re interested in how we do so: how’s the source code.
I made this codepen showing how one projection (the mercator) constrains the geo width and height. In the codepen, the blue rectangle represents the input width / height.
I hope that helps.
I made a fiddle with my code. It’s pretty hard to figure out what’s going on in the html, but I wasn’t sure how to simplify it without losing the entire graph, etc. I tried following your suggestions/modeling my code after your example but for it seems that there are other places in the html that the width /height are being set without my knowledge, and I’m not sure how to override/fix those. What I want is for the graph to be the entire size of the white space, instead of being set dimensions in the middle.
Looks like the width is set via CSS.
What exactly are you trying to show?
The width that I set in the css isn’t the width the graph actually ends up being. No matter how wide I set it, it stays the same size, and the only thing that changes is the amount of white space around it.
Any update on this? Running into the same issue.