Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit ff031ab

Browse files
michaelbabynmichaelbabyn
authored
Merge pull request plotly#1122 from plotly/automargin-tut
Automargin tut
2 parents 461c281 + 052c012 commit ff031ab

File tree

5 files changed

+287
-56
lines changed

5 files changed

+287
-56
lines changed

‎_posts/plotly_js/layout/sizing/2018-10-08-automargin.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
name: Automatically Adjust Margins
3+
plot_url: https://codepen.io/plotly/embed/EdWVVy/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: sizing
6+
order: 1
7+
sitemap: false
8+
arrangement: horizontal
9+
markdown_content: |
10+
Set `automargin=true` ([reference](https://plot.ly/python/reference/#layout-xaxis-automargin)) and Plotly will automatically increase the margin size to prevent ticklabels from being cut off or overlapping with axis titles.
11+
---
12+
var data = [
13+
{
14+
x: ['Apples', 'Oranges', 'Watermelon', 'Pears'],
15+
y: [3, 2, 1, 4],
16+
type: 'bar'
17+
}
18+
];
19+
var layout = {
20+
autosize: false,
21+
width: 500,
22+
height: 500,
23+
yaxis: {
24+
title: 'Y-axis Title',
25+
ticktext: ['long label','Very long label','3','label'],
26+
tickvals: [1, 2, 3, 4],
27+
tickmode: 'array',
28+
automargin: true,
29+
titlefont: { size:30 },
30+
},
31+
paper_bgcolor: '#7f7f7f',
32+
plot_bgcolor: '#c7c7c7'
33+
};
34+
Plotly.newPlot('myDiv', data, layout);

‎_posts/python/layout/sizing/2015-06-30-sizing.html

Lines changed: 108 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,7 @@
1414
ipynb: ~notebook_demo/133
1515
---
1616
{% raw %}
17-
<div class="cell border-box-sizing text_cell rendered">
18-
<div class="prompt input_prompt">
17+
<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">
1918
</div>
2019
<div class="inner_cell">
2120
<div class="text_cell_render border-box-sizing rendered_html">
@@ -26,8 +25,7 @@ <h4 id="New-to-Plotly?">New to Plotly?<a class="anchor-link" href="#New-to-Plotl
2625
</div>
2726
</div>
2827
</div>
29-
<div class="cell border-box-sizing text_cell rendered">
30-
<div class="prompt input_prompt">
28+
<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">
3129
</div>
3230
<div class="inner_cell">
3331
<div class="text_cell_render border-box-sizing rendered_html">
@@ -42,7 +40,7 @@ <h4 id="Version-Check">Version Check<a class="anchor-link" href="#Version-Check"
4240
<div class="prompt input_prompt">In&nbsp;[1]:</div>
4341
<div class="inner_cell">
4442
<div class="input_area">
45-
<div class=" highlight hl-ipython2"><pre><span></span><span class="kn">import</span> <span class="nn">plotly</span>
43+
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">import</span> <span class="nn">plotly</span>
4644
<span class="n">plotly</span><span class="o">.</span><span class="n">__version__</span>
4745
</pre></div>
4846

@@ -54,11 +52,15 @@ <h4 id="Version-Check">Version Check<a class="anchor-link" href="#Version-Check"
5452
<div class="output">
5553

5654

57-
<div class="output_area"><div class="prompt output_prompt">Out[1]:</div>
55+
<div class="output_area">
56+
57+
<div class="prompt output_prompt">Out[1]:</div>
58+
59+
5860

5961

6062
<div class="output_text output_subarea output_execute_result">
61-
<pre>&#39;1.12.12&#39;</pre>
63+
<pre>&#39;3.1.1&#39;</pre>
6264
</div>
6365

6466
</div>
@@ -67,8 +69,7 @@ <h4 id="Version-Check">Version Check<a class="anchor-link" href="#Version-Check"
6769
</div>
6870

6971
</div>
70-
<div class="cell border-box-sizing text_cell rendered">
71-
<div class="prompt input_prompt">
72+
<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">
7273
</div>
7374
<div class="inner_cell">
7475
<div class="text_cell_render border-box-sizing rendered_html">
@@ -78,11 +79,11 @@ <h3 id="Adjusting-Height,-Width,-&amp;-Margins">Adjusting Height, Width, &amp; M
7879
</div>
7980
<div class="cell border-box-sizing code_cell rendered">
8081
<div class="input">
81-
<div class="prompt input_prompt">In&nbsp;[3]:</div>
82+
<div class="prompt input_prompt">In&nbsp;[2]:</div>
8283
<div class="inner_cell">
8384
<div class="input_area">
84-
<div class=" highlight hl-ipython2"><pre><span></span><span class="kn">import</span> <span class="nn">plotly.plotly</span> <span class="kn">as</span> <span class="nn">py</span>
85-
<span class="kn">import</span> <span class="nn">plotly.graph_objs</span> <span class="kn">as</span> <span class="nn">go</span>
85+
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">import</span> <span class="nn">plotly.plotly</span> <span class="k">as</span> <span class="nn">py</span>
86+
<span class="kn">import</span> <span class="nn">plotly.graph_objs</span> <span class="k">as</span> <span class="nn">go</span>
8687

8788
<span class="n">data</span> <span class="o">=</span> <span class="p">[</span>
8889
<span class="n">go</span><span class="o">.</span><span class="n">Scatter</span><span class="p">(</span>
@@ -91,10 +92,10 @@ <h3 id="Adjusting-Height,-Width,-&amp;-Margins">Adjusting Height, Width, &amp; M
9192
<span class="p">)</span>
9293
<span class="p">]</span>
9394
<span class="n">layout</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">Layout</span><span class="p">(</span>
94-
<span class="n">autosize</span><span class="o">=</span><span class="bp">False</span><span class="p">,</span>
95+
<span class="n">autosize</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span>
9596
<span class="n">width</span><span class="o">=</span><span class="mi">500</span><span class="p">,</span>
9697
<span class="n">height</span><span class="o">=</span><span class="mi">500</span><span class="p">,</span>
97-
<span class="n">margin</span><span class="o">=</span><span class="n">go</span><span class="o">.</span><span class="n">Margin</span><span class="p">(</span>
98+
<span class="n">margin</span><span class="o">=</span><span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">Margin</span><span class="p">(</span>
9899
<span class="n">l</span><span class="o">=</span><span class="mi">50</span><span class="p">,</span>
99100
<span class="n">r</span><span class="o">=</span><span class="mi">50</span><span class="p">,</span>
100101
<span class="n">b</span><span class="o">=</span><span class="mi">100</span><span class="p">,</span>
@@ -117,7 +118,11 @@ <h3 id="Adjusting-Height,-Width,-&amp;-Margins">Adjusting Height, Width, &amp; M
117118
<div class="output">
118119

119120

120-
<div class="output_area"><div class="prompt output_prompt">Out[3]:</div>
121+
<div class="output_area">
122+
123+
<div class="prompt output_prompt">Out[2]:</div>
124+
125+
121126

122127
<div class="output_html rendered_html output_subarea output_execute_result">
123128
<iframe id="igraph" scrolling="no" style="border:none;" seamless="seamless" src="https://plot.ly/~PythonPlotBot/145.embed" height="500px" width="500px"></iframe>
@@ -128,4 +133,91 @@ <h3 id="Adjusting-Height,-Width,-&amp;-Margins">Adjusting Height, Width, &amp; M
128133
</div>
129134
</div>
130135

131-
</div>{% endraw %}
136+
</div>
137+
<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">
138+
</div>
139+
<div class="inner_cell">
140+
<div class="text_cell_render border-box-sizing rendered_html">
141+
<h3 id="Automatically-Adjust-Margins">Automatically Adjust Margins<a class="anchor-link" href="#Automatically-Adjust-Margins">&#182;</a></h3>
142+
</div>
143+
</div>
144+
</div>
145+
<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">
146+
</div>
147+
<div class="inner_cell">
148+
<div class="text_cell_render border-box-sizing rendered_html">
149+
<p>Set <a href="https://plot.ly/python/reference/#layout-xaxis-automargin">automargin</a> to <code>True</code> and Plotly will automatically increase the margin size to prevent ticklabels from being cut off or overlapping with axis titles.</p>
150+
151+
</div>
152+
</div>
153+
</div>
154+
<div class="cell border-box-sizing code_cell rendered">
155+
<div class="input">
156+
<div class="prompt input_prompt">In&nbsp;[3]:</div>
157+
<div class="inner_cell">
158+
<div class="input_area">
159+
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">import</span> <span class="nn">plotly.plotly</span> <span class="k">as</span> <span class="nn">py</span>
160+
<span class="kn">import</span> <span class="nn">plotly.graph_objs</span> <span class="k">as</span> <span class="nn">go</span>
161+
162+
<span class="n">data</span> <span class="o">=</span> <span class="p">[</span>
163+
<span class="n">go</span><span class="o">.</span><span class="n">Bar</span><span class="p">(</span>
164+
<span class="n">x</span><span class="o">=</span><span class="p">[</span><span class="s1">&#39;Apples&#39;</span><span class="p">,</span> <span class="s1">&#39;Oranges&#39;</span><span class="p">,</span> <span class="s1">&#39;Watermelon&#39;</span><span class="p">,</span> <span class="s1">&#39;Pears&#39;</span><span class="p">],</span>
165+
<span class="n">y</span><span class="o">=</span><span class="p">[</span><span class="mi">3</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">4</span><span class="p">]</span>
166+
<span class="p">)</span>
167+
<span class="p">]</span>
168+
<span class="n">layout</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">Layout</span><span class="p">(</span>
169+
<span class="n">autosize</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span>
170+
<span class="n">width</span><span class="o">=</span><span class="mi">500</span><span class="p">,</span>
171+
<span class="n">height</span><span class="o">=</span><span class="mi">500</span><span class="p">,</span>
172+
<span class="n">yaxis</span><span class="o">=</span><span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">YAxis</span><span class="p">(</span>
173+
<span class="n">title</span><span class="o">=</span><span class="s1">&#39;Y-axis Title&#39;</span><span class="p">,</span>
174+
<span class="n">ticktext</span><span class="o">=</span><span class="p">[</span><span class="s1">&#39;Very long label&#39;</span><span class="p">,</span><span class="s1">&#39;long label&#39;</span><span class="p">,</span><span class="s1">&#39;3&#39;</span><span class="p">,</span><span class="s1">&#39;label&#39;</span><span class="p">],</span>
175+
<span class="n">tickvals</span><span class="o">=</span><span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">],</span>
176+
<span class="n">tickmode</span><span class="o">=</span><span class="s1">&#39;array&#39;</span><span class="p">,</span>
177+
<span class="n">automargin</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span>
178+
<span class="n">titlefont</span><span class="o">=</span><span class="nb">dict</span><span class="p">(</span><span class="n">size</span><span class="o">=</span><span class="mi">30</span><span class="p">),</span>
179+
<span class="p">),</span>
180+
<span class="n">paper_bgcolor</span><span class="o">=</span><span class="s1">&#39;#7f7f7f&#39;</span><span class="p">,</span>
181+
<span class="n">plot_bgcolor</span><span class="o">=</span><span class="s1">&#39;#c7c7c7&#39;</span>
182+
<span class="p">)</span>
183+
184+
<span class="n">fig</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">Figure</span><span class="p">(</span><span class="n">data</span><span class="o">=</span><span class="n">data</span><span class="p">,</span> <span class="n">layout</span><span class="o">=</span><span class="n">layout</span><span class="p">)</span>
185+
<span class="n">py</span><span class="o">.</span><span class="n">iplot</span><span class="p">(</span><span class="n">fig</span><span class="p">,</span> <span class="n">filename</span><span class="o">=</span><span class="s1">&#39;automargin&#39;</span><span class="p">)</span>
186+
</pre></div>
187+
188+
</div>
189+
</div>
190+
</div>
191+
192+
<div class="output_wrapper">
193+
<div class="output">
194+
195+
196+
<div class="output_area">
197+
198+
<div class="prompt output_prompt">Out[3]:</div>
199+
200+
201+
202+
<div class="output_html rendered_html output_subarea output_execute_result">
203+
<iframe id="igraph" scrolling="no" style="border:none;" seamless="seamless" src="https://plot.ly/~PythonPlotBot/2813.embed" height="500px" width="500px"></iframe>
204+
</div>
205+
206+
</div>
207+
208+
</div>
209+
</div>
210+
211+
</div>
212+
<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">
213+
</div>
214+
<div class="inner_cell">
215+
<div class="text_cell_render border-box-sizing rendered_html">
216+
<h4 id="Reference">Reference<a class="anchor-link" href="#Reference">&#182;</a></h4><p>See <a href="https://plot.ly/python/reference/#layout">https://plot.ly/python/reference/#layout</a> for more information and chart attribute options!</p>
217+
218+
</div>
219+
</div>
220+
</div>
221+
222+
223+
{% endraw %}

0 commit comments

Comments
 (0)