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.