javascript - plotly - responsive width, fixed height - Stack Overflow

admin管理员组

文章数量:1291910

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=".1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src=".min.js"></script>
<script src=".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>

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

• javascript
• plotly.js

Share Improve this question Follow edited Mar 3, 2020 at 16:42 Saleem Khan asked Mar 2, 2020 at 14:12 Saleem KhanSaleem Khan 74922 gold badges77 silver badges2222 bronze badges 2

• Your code snippet is not working. – mit Commented Mar 3, 2020 at 12:33
• adjusted the code – Saleem Khan Commented Mar 3, 2020 at 16:42

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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

Call Plotly.newPlot with same parameters as when created.

From https://plotly./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);
}

本文标签： javascriptplotlyresponsive widthfixed heightStack Overflow