Skip to content

Commit c44eb6b

Browse files
author
Joseph Damiba
authored
Merge pull request #2197 from plotly/marker-symbols
add examples for customizing marker symbols
2 parents 096dd00 + 26ef70b commit c44eb6b

File tree

2 files changed

+123
-4
lines changed

2 files changed

+123
-4
lines changed

.circleci/create_conda_optional_env.sh

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ if [ ! -d $HOME/miniconda/envs/circle_optional ]; then
1414
./miniconda.sh -b -p $HOME/miniconda
1515

1616
# Create environment
17-
# PYTHON_VERSION=3.6
17+
# PYTHON_VERSION=2.7 or 3.5
1818
$HOME/miniconda/bin/conda create -n circle_optional --yes python=$PYTHON_VERSION \
1919
requests nbformat six retrying psutil pandas decorator pytest mock nose poppler xarray scikit-image ipython jupyter ipykernel ipywidgets
2020

doc/python/marker-style.md

Lines changed: 122 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ jupyter:
55
text_representation:
66
extension: .md
77
format_name: markdown
8-
format_version: "1.1"
9-
jupytext_version: 1.1.7
8+
format_version: '1.2'
9+
jupytext_version: 1.3.2
1010
kernelspec:
1111
display_name: Python 3
1212
language: python
@@ -20,7 +20,7 @@ jupyter:
2020
name: python
2121
nbconvert_exporter: python
2222
pygments_lexer: ipython3
23-
version: 3.6.5
23+
version: 3.7.0
2424
plotly:
2525
description: How to style markers in Python with Plotly.
2626
display_as: file_settings
@@ -305,6 +305,125 @@ fig.show()
305305

306306
```
307307

308+
### Custom Marker Symbols
309+
310+
The `marker_symbol` attribute allows you to choose from a wide array of symbols to represent markers in your figures.
311+
312+
The basic symbols are: `circle`, `square`, `diamond`, `cross`, `x`, `triangle`, `pentagon`, `hexagram`, `star`, `diamond`, `hourglass`, `bowtie`, `asterisk`, `hash`, `y`, and `line`.
313+
314+
Each basic symbol is also represented by a number. Adding 100 to that number is equivalent to appending the suffix "-open" to a symbol name. Adding 200 is equivalent to appending "-dot" to a symbol name. Adding 300 is equivalent to appending "-open-dot" or "dot-open" to a symbol name.
315+
316+
In the following figures, hover over a symbol to see its name or number. Set the `marker_symbol` attribute equal to that name or number to change the marker symbol in your figure.
317+
318+
#### Basic Symbols
319+
320+
```python
321+
import plotly.graph_objects as go
322+
323+
fig = go.Figure()
324+
325+
fig.update_layout(title="Basic Symbols")
326+
327+
fig.update_xaxes(showticklabels=False)
328+
fig.update_yaxes(showticklabels=False)
329+
330+
for index in range(27):
331+
fig.add_trace(go.Scatter(x=[(index % 6)], y=[index // 6], name="",
332+
marker_symbol=index, marker_color='black',
333+
marker_size=10, showlegend=False, mode="markers+text",
334+
textposition="middle right", text=f'<b>{index}</b>',
335+
hovertemplate=f'<b>Symbol Number: {index}</b>'))
336+
337+
fig.show()
338+
```
339+
340+
#### All Symbols
341+
342+
```python
343+
import plotly.graph_objects as go
344+
345+
symbols = [0, 'circle', 100, 'circle-open', 200, 'circle-dot', 300,
346+
'circle-open-dot', 1, 'square', 101, 'square-open', 201,
347+
'square-dot', 301, 'square-open-dot', 2, 'diamond', 102,
348+
'diamond-open', 202, 'diamond-dot', 302,
349+
'diamond-open-dot', 3, 'cross', 103, 'cross-open', 203,
350+
'cross-dot', 303, 'cross-open-dot', 4, 'x', 104, 'x-open',
351+
204, 'x-dot', 304, 'x-open-dot', 5, 'triangle-up', 105,
352+
'triangle-up-open', 205, 'triangle-up-dot', 305,
353+
'triangle-up-open-dot', 6, 'triangle-down', 106,
354+
'triangle-down-open', 206, 'triangle-down-dot', 306,
355+
'triangle-down-open-dot', 7, 'triangle-left', 107,
356+
'triangle-left-open', 207, 'triangle-left-dot', 307,
357+
'triangle-left-open-dot', 8, 'triangle-right', 108,
358+
'triangle-right-open', 208, 'triangle-right-dot', 308,
359+
'triangle-right-open-dot', 9, 'triangle-ne', 109,
360+
'triangle-ne-open', 209, 'triangle-ne-dot', 309,
361+
'triangle-ne-open-dot', 10, 'triangle-se', 110,
362+
'triangle-se-open', 210, 'triangle-se-dot', 310,
363+
'triangle-se-open-dot', 11, 'triangle-sw', 111,
364+
'triangle-sw-open', 211, 'triangle-sw-dot', 311,
365+
'triangle-sw-open-dot', 12, 'triangle-nw', 112,
366+
'triangle-nw-open', 212, 'triangle-nw-dot', 312,
367+
'triangle-nw-open-dot', 13, 'pentagon', 113,
368+
'pentagon-open', 213, 'pentagon-dot', 313,
369+
'pentagon-open-dot', 14, 'hexagon', 114, 'hexagon-open',
370+
214, 'hexagon-dot', 314, 'hexagon-open-dot', 15,
371+
'hexagon2', 115, 'hexagon2-open', 215, 'hexagon2-dot',
372+
315, 'hexagon2-open-dot', 16, 'octagon', 116,
373+
'octagon-open', 216, 'octagon-dot', 316,
374+
'octagon-open-dot', 17, 'star', 117, 'star-open', 217,
375+
'star-dot', 317, 'star-open-dot', 18, 'hexagram', 118,
376+
'hexagram-open', 218, 'hexagram-dot', 318,
377+
'hexagram-open-dot', 19, 'star-triangle-up', 119,
378+
'star-triangle-up-open', 219, 'star-triangle-up-dot', 319,
379+
'star-triangle-up-open-dot', 20, 'star-triangle-down',
380+
120, 'star-triangle-down-open', 220,
381+
'star-triangle-down-dot', 320,
382+
'star-triangle-down-open-dot', 21, 'star-square', 121,
383+
'star-square-open', 221, 'star-square-dot', 321,
384+
'star-square-open-dot', 22, 'star-diamond', 122,
385+
'star-diamond-open', 222, 'star-diamond-dot', 322,
386+
'star-diamond-open-dot', 23, 'diamond-tall', 123,
387+
'diamond-tall-open', 223, 'diamond-tall-dot', 323,
388+
'diamond-tall-open-dot', 24, 'diamond-wide', 124,
389+
'diamond-wide-open', 224, 'diamond-wide-dot', 324,
390+
'diamond-wide-open-dot', 25, 'hourglass', 125,
391+
'hourglass-open', 26, 'bowtie', 126, 'bowtie-open', 27,
392+
'circle-cross', 127, 'circle-cross-open', 28, 'circle-x',
393+
128, 'circle-x-open', 29, 'square-cross', 129,
394+
'square-cross-open', 30, 'square-x', 130, 'square-x-open',
395+
31, 'diamond-cross', 131, 'diamond-cross-open', 32,
396+
'diamond-x', 132, 'diamond-x-open', 33, 'cross-thin', 133,
397+
'cross-thin-open', 34, 'x-thin', 134, 'x-thin-open', 35,
398+
'asterisk', 135, 'asterisk-open', 36, 'hash', 136,
399+
'hash-open', 236, 'hash-dot', 336, 'hash-open-dot', 37,
400+
'y-up', 137, 'y-up-open', 38, 'y-down', 138,
401+
'y-down-open', 39, 'y-left', 139, 'y-left-open', 40,
402+
'y-right', 140, 'y-right-open', 41, 'line-ew', 141,
403+
'line-ew-open', 42, 'line-ns', 142, 'line-ns-open', 43,
404+
'line-ne', 143, 'line-ne-open', 44, 'line-nw', 144,
405+
'line-nw-open']
406+
407+
fig = go.Figure()
408+
409+
fig.update_layout(title="Custom Marker Symbols", height=800)
410+
411+
fig.update_xaxes(showticklabels=False)
412+
fig.update_yaxes(showticklabels=False)
413+
414+
for index, symbol in enumerate(symbols[::2]):
415+
fig.add_trace(go.Scatter(x=[(index % 16)], y=[(index // 16)],
416+
marker_symbol=symbol, marker_color=index,
417+
marker_size=20, showlegend=False, mode="markers+text",
418+
name='',
419+
hovertemplate=f'<b>Symbol Name: {symbols[2*index + 1]}</b><br><b>Symbol Number: {symbols[2*index]}</b>',
420+
textfont_size=8
421+
))
422+
423+
fig.show()
424+
```
425+
426+
308427
### Reference
309428

310429
See https://plot.ly/python/reference/ for more information and chart attribute options!

0 commit comments

Comments
 (0)