title: Responsive PlotlyJS chart in Bootstrap card
body: <p>The following is my <code>js</code> code to plot a reponsive plot using PlotlyJS.</p>
  
  <pre><code>var trace1 = {
    x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'],
    y: [20, 14, 23, 20, 14, 23, 34, 26],
    marker: {
      color: ['rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)']
    },
    name: 'Item 1',
    type: 'bar'
  };
  
  var trace2 = {
    x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'],
    y: [12, 18, 29, 12, 18, 29, 24, 22],
    marker: {
      color: ['rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)']
    },
    name: 'Item 2',
    type: 'bar'
  };
  
  var trace3 = {
    x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'],
    y: [12, 18, 29, 12, 18, 29, 24, 22],
    marker: {
      color: ['rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)']
    },
    name: 'Item 3',
    type: 'bar'
  };
  
  var data = [trace1, trace2, trace3];
  
  var layout = {
    barmode: 'stack',
  };
  
  Plotly.newPlot('myDivPlotly', data, layout);
  
  // code to make plotlyjs responsive
  (function() {
    var d3 = Plotly.d3;
    var WIDTH_IN_PERCENT_OF_PARENT = 100,
        HEIGHT_IN_PERCENT_OF_PARENT = 100;
  
    var gd3 = d3.selectAll(".responsive-plot")
        .style({
          width: WIDTH_IN_PERCENT_OF_PARENT + '%',
          'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',
  
          height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
          'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
        });
  
    var nodes_to_resize = gd3[0]; //not sure why but the goods are within a nested array
    window.onresize = function() {
      for (var i = 0; i &lt; nodes_to_resize.length; i++) {
        Plotly.Plots.resize(nodes_to_resize[i]);
      }
    };
  
  })();
  </code></pre>
  
  <p>The following is my <code>HTML</code> code to plot the plotlyJS chart in Bootstrap card.</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-6"&gt;
        &lt;div class="card"&gt;
          &lt;h5 class="card-header"&gt;Featured&lt;/h5&gt;
          &lt;div class="card-body"&gt;
            &lt;h5 class="card-title"&gt;Special title treatment&lt;/h5&gt;
            &lt;p class="card-text"&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
            &lt;a href="#" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6"&gt;
        &lt;div class="card"&gt;
          &lt;h5 class="card-header"&gt;Featured&lt;/h5&gt;
          &lt;div class="card-body"&gt;
            &lt;div class="responsive-plot" id="myDivPlotly"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The chart is now reponsive, but the problem is there is lot of empty space above and below that plot. How to remove the empty spaces surrounding the plot or reduce the height of the card.</p>
  
  <p><a href="https://i.stack.imgur.com/AbMME.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AbMME.png" alt="enter image description here"></a></p>
  
  <p>Kindly help. Thanks.</p>