Huge whitespace around plotly chart in bootstrap grid

Question

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.

Answer 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.

Answer 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.