Reputation: 749

plotly - responsive width, fixed height

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

Upvotes: 6

Answers (4)

Darkproduct

Reputation: 1245

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);
}

Upvotes: -1

Daniel Garmoshka

Reputation: 6352

Call Plotly.newPlot with same parameters as when created.

Upvotes: 0

Ben Wilson

Reputation: 2676

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'));

Upvotes: 3

Saleem Khan

Reputation: 749

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') );
   })

Upvotes: 1

plotly - responsive width, fixed height

Answers (4)

Related Questions