Skip to content

Commit ad54177

Browse files
Squashed version of hline-vline-multifacets
1 parent 54efc64 commit ad54177

17 files changed

+2265
-193
lines changed

.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ node_modules/
3131

3232
# virtual envs
3333
vv
34-
venv
34+
venv*
3535

3636
# dist files
3737
build
@@ -46,4 +46,5 @@ temp-plot.html
4646
doc/python/.ipynb_checkpoints
4747
doc/python/.mapbox_token
4848
doc/.ipynb_checkpoints
49+
tags
4950
doc/check-or-enforce-order.py

doc/python/figure-structure.md

+15-2
Original file line numberDiff line numberDiff line change
@@ -95,18 +95,31 @@ The third of the three top-level attributes of a figure is `frames`, whose value
9595

9696
### The `config` Object
9797

98-
At [render-time](/python/renderers/), it is also possible to control certain figure behaviors which are not considered part of the figure proper i.e. the behaviour of the "modebar" and how the figure relates to mouse actions like scrolling etc. The object that contains these options is called the [`config`, and has its own documentation page](/python/configuration-options/). It is exposed in Python as the `config` keyword argument of the `.show()` method on `plotly.graph_objects.Figure` objects.
98+
At [render-time](/python/renderers/), it is also possible to control certain figure behaviors which are not considered part of the figure proper i.e. the behavior of the "modebar" and how the figure relates to mouse actions like scrolling etc. The object that contains these options is called the [`config`, and has its own documentation page](/python/configuration-options/). It is exposed in Python as the `config` keyword argument of the `.show()` method on `plotly.graph_objects.Figure` objects.
9999

100-
### Positioning With Paper or Container Coordinates
100+
### Positioning With Paper, Container Coordinates, or Axis Domain Coordinates
101101

102102
Various figure components configured within the layout of the figure support positioning attributes named `x` or `y`, whose values may be specified in "paper coordinates" (sometimes referred to as "plot fractions" or "normalized coordinates"). Examples include `layout.xaxis.domain` or `layout.legend.x` or `layout.annotation[].x`.
103103

104104
Positioning in paper coordinates is *not* done in absolute pixel terms, but rather in terms relative to a coordinate system defined with an origin `(0,0)` at `(layout.margin.l, layout.margin.b)` and a point `(1,1)` at `(layout.width-layout.margin.r, layout.height-layout.margin.t)` (note: `layout.margin` values are pixel values, as are `layout.width` and `layout.height`). Paper coordinate values less than 0 or greater than 1 are permitted, and refer to areas within the plot margins.
105105

106+
To position an object in "paper" coordinates, the corresponding axis reference
107+
is set to `"paper"`. For instance a shape's `xref` attribute would be set to
108+
`"paper"` so that the `x` value of the shape refers to its position in paper
109+
coordinates.
110+
106111
Note that the contents of the `layout.margin` attribute are by default computed based on the position and dimensions of certain items like the title or legend, and may be made dependent on the position and dimensions of tick labels as well when setting the `layout.xaxis.automargin` attribute to `True`. This has the effect of automatically increasing the margin values and therefore shrinking the physical area defined between the `(0,0)` and `(1,1)` points. Positioning certain items at paper coordinates less than 0 or greater than 1 will also trigger this behavior. The `layout.width` and `layout.height`, however, are taken as givens, so a figure will never grow or shrink based on its contents.
107112

108113
The figure title may be positioned using "container coordinates" which have `(0,0)` and `(1,1)` anchored at the bottom-left and top-right of the figure, respectively, and therefore are independent of the values of layout.margin.
109114

115+
Furthermore, shapes, annotations, and images can be placed relative to an axis's
116+
domain so that, for instance, an `x` value of `0.5` would place the object
117+
halfway along the x-axis, regardless of the domain as specified in the
118+
`layout.xaxis.domain` attribute. This behavior can be specified by adding
119+
`' domain'` to the axis reference in the axis referencing attribute of the object.
120+
For example, setting `yref = 'y2 domain'` for a shape will refer to the length
121+
and position of the axis named `y2`.
122+
110123
### 2D Cartesian Trace Types and Subplots
111124

112125
The most commonly-used kind of subplot is a [two-dimensional Cartesian subplot](/python/axes/). Traces compatible with these subplots support `xaxis` and `yaxis` attributes whose values must refer to corresponding objects in the layout portion of the figure. For example, if `xaxis="x"`, and `yaxis="y"` (which is the default) then this trace is drawn on the subplot at the intersection of the axes configured under `layout.xaxis` and `layout.yaxis`, but if `xaxis="x2"` and `yaxis="y3"` then the trace is drawn at the intersection of the axes configured under `layout.xaxis2` and `layout.yaxis3`. Note that attributes such as `layout.xaxis` and `layout.xaxis2` etc do not have to be explicitly defined, in which case default values will be inferred. Multiple traces of different types can be drawn on the same subplot.
+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
---
2+
jupyter:
3+
jupytext:
4+
notebook_metadata_filter: all
5+
text_representation:
6+
extension: .md
7+
format_name: markdown
8+
format_version: '1.2'
9+
jupytext_version: 1.3.0
10+
kernelspec:
11+
display_name: Python 3
12+
language: python
13+
name: python3
14+
language_info:
15+
codemirror_mode:
16+
name: ipython
17+
version: 3
18+
file_extension: .py
19+
mimetype: text/x-python
20+
name: python
21+
nbconvert_exporter: python
22+
pygments_lexer: ipython3
23+
version: 3.7.3
24+
plotly:
25+
description: How to add annotated horizontal and vertical lines in Python.
26+
display_as: file_settings
27+
language: python
28+
layout: base
29+
name: Shapes
30+
order: 37
31+
permalink: python/horizontal-vertical-shapes/
32+
thumbnail: thumbnail/horizontal-vertical-shapes.jpg
33+
---
34+
35+
### Horizontal and Vertical Lines and Boxes (Autoshapes) in Plotly.py
36+
37+
Horizontal and vertical lines and rectangles (autoshapes) that span an entire
38+
plot can be added via the `add_hline`, `add_vline`, `add_hrect`, and `add_vrect`
39+
methods of `plotly.graph_objects.Figure`. These shapes are fixed to the
40+
endpoints of one axis, regardless of the range of the plot, and fixed to data
41+
coordinates on the other axis. For example
42+
43+
44+
```python
45+
import plotly.express as px
46+
47+
df = px.data.iris()
48+
fig = px.scatter(df, x="sepal_length", y="sepal_width")
49+
50+
# Add a vertical line that spans the entire y axis
51+
# intersecting the x axis at x=5
52+
fig.add_vline(x=5, line_color="red")
53+
# Add a horizontal line that spans the entire x axis
54+
# intersecting the y axis at y=3
55+
fig.add_hline(y=3, line_color="blue")
56+
# Add a vertical rectangle that spans the entire y axis
57+
# intersecting the x axis at 5.5 and 6.5
58+
fig.add_vrect(x0=5.5, x1=6.5, line_color="purple")
59+
# Add a horizontal rectangle that spans the entire x axis
60+
# intersecting the y axis at 2.5 and 4
61+
fig.add_hrect(y0=2.5, y1=4, line_color="orange")
62+
# (try dragging the plot around)
63+
fig.show()
64+
```
65+
66+
#### Adding Autoshapes to Multiple Facets / Subplots
67+
68+
The same line or box can be added to multiple facets by using the `'all'`
69+
keyword in the `row` and `col` arguments like with `Figure.add_shape`. For
70+
example
71+
```python
72+
import plotly.express as px
73+
74+
df = px.data.tips()
75+
fig = px.scatter(df, x="total_bill", y="tip", facet_row="smoker", facet_col="sex")
76+
# Adds a vertical line to all facets
77+
fig.add_vline(x=30, row="all", col="all", line_color="purple")
78+
# Adds a horizontal line to all the rows of the second column
79+
fig.add_hline(y=6, row="all", col=2, line_color="yellow")
80+
# Adds a vertical rectangle to all the columns of the first row
81+
fig.add_vrect(x0=20, x1=40, row=1, col="all", line_color="green")
82+
fig.show()
83+
```
84+
The default `row` and `col` values are `"all"` so
85+
`fig.add_vline(x=30, line_color="purple")` is equivalent
86+
to `fig.add_vline(x=30, row="all", col="all", line_color="purple")` in the above
87+
example.
88+
89+
#### Adding Text Annotations to Autoshapes
90+
91+
Text can be added to an autoshape using the `annotation` keyword. Using the
92+
above example:
93+
```python
94+
import plotly.express as px
95+
import plotly.graph_objects as go
96+
97+
df = px.data.tips()
98+
fig = px.scatter(df, x="total_bill", y="tip", facet_row="smoker", facet_col="sex")
99+
# Add annotations anchored to the top right corner of the resulting lines
100+
fig.add_vline(x=30, line_color="purple", annotation=go.layout.Annotation(text="A"))
101+
# Another way to add annotations when we are only interested in specifying text
102+
fig.add_hline(y=6, row="all", col=2, line_color="yellow", annotation_text="B")
103+
# Specify the position of the resulting annotations
104+
fig.add_vrect(
105+
x0=20,
106+
x1=40,
107+
row=1,
108+
col="all",
109+
line_color="green",
110+
annotation_text="C",
111+
annotation_position="bottom inside left",
112+
)
113+
fig.show()
114+
```
115+
Call `help` on any of the autoshape functions in the Python interpreter to learn
116+
more (e.g., `help(fig.add_vline)`).

doc/python/images.md

+7-4
Original file line numberDiff line numberDiff line change
@@ -309,15 +309,15 @@ fig.show(config={'doubleClick': 'reset'})
309309

310310
_introduced in plotly 4.7_
311311

312-
It can be useful to add shapes to a layout image, for highlighting an object, drawing bounding boxes as part of a machine learning training set, or identifying seeds for a segmentation algorithm.
312+
It can be useful to add shapes to a layout image, for highlighting an object, drawing bounding boxes as part of a machine learning training set, or identifying seeds for a segmentation algorithm.
313313

314314
In order to enable shape drawing, you need to
315315
- define a dragmode corresponding to a drawing tool (`'drawline'`,`'drawopenpath'`, `'drawclosedpath'`, `'drawcircle'`, or `'drawrect'`)
316316
- add [modebar buttons](/python/configuration-options#add-optional-shapedrawing-buttons-to-modebar) corresponding to the drawing tools you wish to use.
317317

318318
The style of new shapes is specified by the `newshape` layout attribute. Shapes can be selected and modified after they have been drawn. More details and examples are given in the [tutorial on shapes](/python/shapes#drawing-shapes-on-cartesian-plots).
319319

320-
Drawing or modifying a shape triggers a `relayout` event, which [can be captured by a callback inside a Dash application](https://dash.plotly.com/interactive-graphing).
320+
Drawing or modifying a shape triggers a `relayout` event, which [can be captured by a callback inside a Dash application](https://dash.plotly.com/interactive-graphing).
321321

322322
```python
323323
import plotly.graph_objects as go
@@ -339,7 +339,7 @@ fig.add_layout_image(
339339
)
340340
fig.update_xaxes(showgrid=False, range=(0, img_width))
341341
fig.update_yaxes(showgrid=False, scaleanchor='x', range=(img_height, 0))
342-
# Line shape added programatically
342+
# Line shape added programatically
343343
fig.add_shape(
344344
type='line', xref='x', yref='y',
345345
x0=650, x1=1080, y0=380, y1=180, line_color='cyan'
@@ -359,5 +359,8 @@ fig.show(config={'modeBarButtonsToAdd':['drawline',
359359
]})
360360
```
361361

362+
363+
### Images Placed Relative to the Axes
364+
362365
#### Reference
363-
See https://plotly.com/python/reference/layout/images/ for more information and chart attribute options!
366+
See https://plotly.com/python/reference/layout/images/ for more information and chart attribute options!

0 commit comments

Comments
 (0)