Plotly.js不一致地向图表添加上边距，如何防止它

Question

With Plotly.js I'm getting a top-margin added sometimes (not consistently), where the total height of the graph is 300px, but the graph itself is only 150px high. The SVG container then is stretched and the actual graph is smaller. What can I do to prevent this white-space, and why does it only show up selectively?

Plotly Matlab syntax that results in 300px div instead of a 300px graph:

`% PLOT MEAN MOVEMENT
    data = {...
      struct(...
        'x', nScan, ...
        'y',fastmotion, ...
         'type', 'scatter')...
         };
    if max(fastmotion) < 0.3
        yminval = 0.3;
    else
        yminval = round(max(fastmotion) + 1);
    end
    layout = struct(...
    'yaxis', struct(...
    'title', 'Movement (mm)', ...
    'range', [0, yminval]));
    header{3} = 'Absolute Movement';
    layout.width = 800;
    layout.height = 300;
    p = plotlyfig; 
    p.data = data;
    p.layout = layout;
    p.PlotOptions.FileName = 'plot_5';
    html_file = plotlyoffline(p);
    html_file;`

Answer 1

You can check this answer on a different question, and here is the fiddle .

The quick code you can use:

var layout = {
  margin: {
    l: 20,
    r: 20,
    b: 20,
    t: 20,
    pad: 5
  }, title: false
};

As mfedoten says on his answer: But be careful if you have tick labels, if you set margins to zero the labels will be cropped

Answer 2

Probably line 68 in plotlyfig.m just set default margins.

You can set the margins manually like that:

p.layout.margin = struct('b', 15,'l', 30, 'r', 0, 't', 0);

You can find documentation on margins here .

But be careful if you have tick labels, if you set margins to zero the labels will be cropped.

Answer 3

So apparently line 68 in plotlyfig.m caused the issue:

obj.PlotlyDefaults.MinTitleMargin = 80;

Even though I had no title, it sometimes added 80 px on top of the graph, maxing out at the specified graph height. Setting this value to 0 solves the problem.