plotly - responsive width, fixed height

Question

I have attempted to make a plotly chart that fits within a scrollable parent div:

data = {
          Name: {0:'name1', 1:'name2', 2: 'name3', 
                 3:'n4',4:'ewf',5:'dgag', 6:'faf', 7:'dfss',
                 8:'345',9:'9',10:'23435', 11:'2e345',12:'3345', 13:'a345', 
                 14:'34g5', 15:'3f45'},
          Count: {0:1023, 1:2345, 3:3875,4:234,5:3456, 6:84, 7:7763,
                  8:345,9:2345,10:2345, 11:2345,12:345, 13:345, 14:345, 
                  15:345},
          Index: {0:35, 1:200, 2:160, 3:24,4:234,5:356, 6:84, 7:73,
                  8:345,9:2345,10:2345, 11:2345,12:345, 13:345, 14:345, 
                  15:345}
       }
$('#p1').html("");
console.log(data)
Plotly.newPlot('p1',
    [{
        type: 'bar',
        x: Object.values(data.Count),
        y: Object.values(data.Name),
        base: 0,
        orientation: 'h'
    },{
        type: 'bar',
        x: Object.values(data.Index).map(function (e) {
            e = e-100
            return e
        }),
        y: Object.values(data.Name),
        base: 100,
        orientation: 'h',
        xaxis: 'x2',
        yaxis: 'y'
        
    },],
    {
        height: 10*2.3*Object.keys(data.Index).length,
        yaxis: {
            automargin: true,
            tickangle: 35
        },
        grid: {
            rows: 1,
            columns: 2,
            subplots: [['xy', 'x2y']]
        }
    },
    {
        responsive: true
    })

.col.tpcs{
    overflow-y: scroll;
    overflow-x: hidden;
    display: inline-block;
    height: 400px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row loading pt-5 mt-md-3 mb-5">
   <div class="col tpcs" id='p1'></div>
</div>

Based on the documentation here https://plot.ly/javascript/responsive-fluid-layout/, I have created a responsive plot:

I want the plot to overflow downwards, so that I can scroll down, but by setting responsive: true, the height defaults to the size of #p1, which is 400px.

Is there a straightforward way to make ONLY the width responsive? I would like to keep the manual height at 10*2.3*Object.keys(data.Index).length

Cranford

Your code snippet is not working. – Saipan

adjusted the code – Cranford

Answer 1

Set your plot to responsive, then use this function (which triggers a window resize event in the browser) whenever you resize the parent:

window.dispatchEvent(new Event('resize'));

Philina

Answer 2

it looks like plotly doesn't yet have that functionality. What I had to do to work around it was to make a fully responsive plot and wrap it into an additional nested div like so:

    <div class="row loading pt-5 mt-md-3 mb-5">
        <div class="col tpcs" id='p1wrap'>
            <div class="ph" id=p1></div>
        </div>
    </div>

Then I needed to make the div width responsive to its parent div:

   function resP(id){
    var d3 = Plotly.d3;

    var parent_width = $("#"+id).parent().width()
    var gd3 = d3.select(`div[id=${id}]`)
        .style({
            width: parent_width - 10,
            //'margin-right': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + 'vh',
            //'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
        });
    return gd3.node();
   }

   window.addEventListener('resize', function(){
    Plotly.Plots.resize( resP('p1') );
   })

Cranford

Answer 3

Call Plotly.newPlot with same parameters as when created.

Systole

Answer 4

From https://plotly.com/javascript/responsive-fluid-layout/ :

If you set the responsive attribute equal to true (using the config object), then your figures will be automatically resized when the browser window size changes. This is an especially useful feature for charts which are going to viewed on mobile devices!

var trace1 = {
  type: 'bar',
  x: [1, 2, 3, 4],
  y: [5, 10, 2, 8],
  marker: {
      color: '#C8A2C8',
      line: {
          width: 2.5
      }
  }
};

var data = [ trace1 ];

var layout = { 
  title: 'Responsive to window\'s size!',
  font: {size: 18}
};

var config = {responsive: true};

Plotly.newPlot('myDiv', data, layout, config);

And here a typescript version:

import * as Plotly from "plotly.js-dist"

function CreateChart() {
  const data: Plotly.Data[] = [
    {
      x: ['giraffes', 'orangutans', 'monkeys'],
      y: [20, 14, 23],
      type: 'bar'
    }
  ];

  const layout: Partial<Plotly.Layout> = {
    title: 'Test Plot',
  };

  const config: Partial<Plotly.Config> = {
    responsive: true,
  };

  Plotly.newPlot('chart', data, layout, config);
}

Signpost