Make plot fill parent size?

plotly.js
1

I had a look at the responsive example to make plotly.js plots be responsive (i.e., to fill an area that in my case is specified as em). The problem I’m finding is that plotly leaves significant amounts of space on the left and right no matter what I do. Is there any way to make a plotly plot actually fill the area of its parent container?

Example here: http://codepen.io/plotly/pen/wKpPvj

This is the original link from the plotly docs. Even with both values set to 100, and the margins explicitly set to 0, there is a good 50+ pixels on each side of the chart in that example. How to get rid of it?

2

plotly is an object that has a graph in it
and you need to make the graph fill a bigger part of it
to solve your problem you need to add the margin object like i did below.
and just play with the values to get the result you want

Plotly.plot(gd, [{
type: ‘bar’,
x: [1, 2, 3, 4],
y: [5, 10, 2, 8],
marker: {
color: ‘#C8A2C8’,
line: {
width: 2.5
}
}
}], {
title: ‘Auto-Resize’,
font: {
size: 16
},
margin: {
t: 20, //top margin
l: 20, //left margin
r: 20, //right margin
b: 20 //bottom margin
}
});

3

Thanks much for the example. I did notice the margin object in the docs, but i had mistakenly put it in the wrong object passed to the plot() function. No wonder it had no effect.