Huge whitespace around plotly chart in bootstrap grid

大憨熊 提交于 2020-08-27 09:02:02

问题


I have a .Net application in which I am trying to create a graph using bootstrap.js and plotly.js.

I have a problem with a huge white-space in my grid when I create a responsive chart. I have figured out that a part of the problem is that size of the plotly svg-container defaults to 450px in height.

I have created a fiddle showing the huge white space problem.

In my fiddle I have a small commented code block that sets the layout size, but even setting that doesn't really seem to help with removing most of the white space. Also if it becomes too small it starts cropping away some of the chart.

//can adjust size of svg-container
//but doesn't adjust white space
//var layout = {
//  height: 350
//}

//Plotly.plot(gd, pieData, layout);

As you might have guessed I would like to make it smaller - remove quite some of the white space, so that the table below doesn't seem so out of place.


回答1:


You can use the layout functionality. For your fiddle example you could do the following:

var layout = {
  height: 230,
  width: 100,
  margin: {
    l: 60,
    r: 10,
    b: 0,
    t: 10,
    pad: 4
  }
};

Plotly.plot(gd, pieData, layout);

You can play with the margin property values to position your figure properly.




回答2:


In the layout tag use width and height to set the container. Use like -

var layout = {
    height : 400,
    width : 550,
    title : 'Demo',
    tracetoggle: false
};

Also the white space is there because of the modebar (which is to take graph snap, zoom, move etc), so you can replace the modebar as well and then shrink the svg container.

To hide modebar -

Plotly.newPlot('myDiv', data, layout, {displayModeBar: false});

To shift the graph to top use inline style in the svg-container div element, though this is not the best way but a hack -

<div id="myDiv" style="margin-top: -50px;"></div>

Hope this helps.




回答3:


#allStates{
  height:300px;
  width:300px;

}

I added this to css and it removed whitespace.



来源:https://stackoverflow.com/questions/45347339/huge-whitespace-around-plotly-chart-in-bootstrap-grid

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!