Skip to content

Update plotly.js to v2.34.0 + add docs #4627

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 20 commits into from
Jul 22, 2024
Merged
Show file tree
Hide file tree
Changes from 14 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
60 changes: 58 additions & 2 deletions doc/python/axes.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ jupyter:
extension: .md
format_name: markdown
format_version: '1.3'
jupytext_version: 1.16.1
jupytext_version: 1.16.3
kernelspec:
display_name: Python 3 (ipykernel)
language: python
Expand All @@ -20,7 +20,7 @@ jupyter:
name: python
nbconvert_exporter: python
pygments_lexer: ipython3
version: 3.10.11
version: 3.10.14
plotly:
description: How to adjust axes properties in Python - axes titles, styling and
coloring axes and grid lines, ticks, tick labels and more.
Expand Down Expand Up @@ -448,6 +448,62 @@ fig.update_yaxes(minor_ticks="inside")
fig.show()
```

#### Adjust Tick Label Positions

*New in 5.23*

You can adjust tick label positions by moving them a number of pixels away from the axis using `ticklabelstandoff` or along the axis using `ticklabelshift`.

In this example, `ticklabelshift=25` shifts the labels 25 pixels to the right along the x-axis. By providing a negative value, we could move the labels 25 pixels to the left, (`ticklabelshift=-25`).

Here, `ticklabelstandoff=15` moves the labels further 15 pixels away from the x-axis. A negative value here would move them close to the axis.

```python
import plotly.express as px

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')

fig = px.line(df, x='Date', y='AAPL.High')

fig.update_layout(
xaxis=dict(
ticks='outside',
ticklen=10,
ticklabelshift=25,
ticklabelstandoff=15
)
)

fig.show()
```

#### Use Minor Tick for Label

*New in 5.23*

On date or linear axes, use `ticklabelindex` to use..

To draw the label for the minor tick before each major tick, choose `ticklabelindex` -1, like in the following example.

```python
import plotly.express as px

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')

fig = px.line(df, x='Date', y='AAPL.High')

fig.update_layout(
xaxis=dict(
minor=dict(ticks='outside'),
ticks='outside',
ticklen=10,
ticklabelindex=-1
)
)

fig.show()
```

### Axis lines: grid and zerolines

##### Toggling Axis grid lines
Expand Down
63 changes: 61 additions & 2 deletions doc/python/scattermapbox.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ jupyter:
extension: .md
format_name: markdown
format_version: '1.3'
jupytext_version: 1.14.1
jupytext_version: 1.16.2
kernelspec:
display_name: Python 3 (ipykernel)
language: python
Expand All @@ -20,7 +20,7 @@ jupyter:
name: python
nbconvert_exporter: python
pygments_lexer: ipython3
version: 3.8.0
version: 3.10.0
plotly:
description: How to make scatter plots on Mapbox maps in Python.
display_as: maps
Expand Down Expand Up @@ -265,6 +265,65 @@ fig.show()

```

#### Font Customization

You can customize the font on `go.Scattermapbox` traces with `textfont`. For example, you can set the font `family`.

```python
import plotly.graph_objects as go

token = open(".mapbox_token").read() # you need your own token

fig = go.Figure(go.Scattermapbox(
mode = "markers+text+lines",
lon = [-75, -80, -50], lat = [45, 20, -20],
marker = {'size': 20, 'symbol': ["bus", "harbor", "airport"]},
text = ["Bus", "Harbor", "airport"], textposition = "bottom right",
textfont = dict(size=18, color="black", family="Open Sans Bold")
))

fig.update_layout(
mapbox = {
'accesstoken': token,
'style': "outdoors", 'zoom': 0.7},
showlegend = False,)

fig.show()
```

`go.Scattermapbox` supports the following values for `textfont.family`:

'Metropolis Black Italic', 'Metropolis Black', 'Metropolis Bold Italic', 'Metropolis Bold', 'Metropolis Extra Bold Italic', 'Metropolis Extra Bold', 'Metropolis Extra Light Italic', 'Metropolis Extra Light', 'Metropolis Light Italic', 'Metropolis Light', 'Metropolis Medium Italic', 'Metropolis Medium', 'Metropolis Regular Italic', 'Metropolis Regular', 'Metropolis Semi Bold Italic', 'Metropolis Semi Bold', 'Metropolis Thin Italic', 'Metropolis Thin', 'Open Sans Bold Italic', 'Open Sans Bold', 'Open Sans Extrabold Italic', 'Open Sans Extrabold', 'Open Sans Italic', 'Open Sans Light Italic', 'Open Sans Light', 'Open Sans Regular', 'Open Sans Semibold Italic', 'Open Sans Semibold', 'Klokantech Noto Sans Bold', 'Klokantech Noto Sans CJK Bold', 'Klokantech Noto Sans CJK Regular', 'Klokantech Noto Sans Italic', and 'Klokantech Noto Sans Regular'.


##### Font Weight

*New in 5.23*

You can specify a numeric font weight on `go.Scattermapbox` with `textfont.weight`.

```python
import plotly.graph_objects as go

token = open(".mapbox_token").read() # you need your own token

fig = go.Figure(go.Scattermapbox(
mode = "markers+text+lines",
lon = [-75, -80, -50], lat = [45, 20, -20],
marker = dict(size=20, symbol=["bus", "harbor", "airport"]),
text = ["Bus", "Harbor", "airport"], textposition = "bottom right",
textfont = dict(size=18, color="black", weight=900)
))

fig.update_layout(
mapbox = dict(
accesstoken=token,
style="outdoors", zoom=0.7),
showlegend = False,)

fig.show()
```

#### Reference

See [function reference for `px.(scatter_mapbox)`](https://plotly.com/python-api-reference/generated/plotly.express.scatter_mapbox) or https://plotly.com/python/reference/scattermapbox/ for more information and options!
160 changes: 158 additions & 2 deletions doc/python/text-and-annotations.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ jupyter:
extension: .md
format_name: markdown
format_version: '1.3'
jupytext_version: 1.16.1
jupytext_version: 1.16.2
kernelspec:
display_name: Python 3 (ipykernel)
language: python
Expand All @@ -20,7 +20,7 @@ jupyter:
name: python
nbconvert_exporter: python
pygments_lexer: ipython3
version: 3.10.11
version: 3.10.0
plotly:
description: How to add text labels and annotations to plots in python.
display_as: file_settings
Expand Down Expand Up @@ -395,6 +395,162 @@ fig.show()

```

## Numeric Font Weight

*New in 5.23*

In the previous example, we set a font `weight` using a keyword value. You can also set font `weight` using a numeric value.

The font weights that are available depend on the font family that is set. If you set a font `weight` that isn't available for a particular font family, the weight will be rounded to the nearest available value.


```python
import plotly.graph_objects as go
from plotly import data

df = data.medals_wide()

fig = go.Figure(
data=[
go.Bar(
x=df.nation,
y=df.gold,
name="Gold",
marker=dict(color="Gold"),
text="Gold",
textfont=dict(weight=900, size=17),
),
go.Bar(
x=df.nation,
y=df.silver,
name="Silver",
marker=dict(color="MediumTurquoise"),
text="Silver",
textfont=dict(size=17),
),
go.Bar(
x=df.nation,
y=df.bronze,
name="Bronze",
marker=dict(color="LightGreen"),
text="Bronze",
textfont=dict(size=17),
),
],
layout=dict(barcornerradius=15, showlegend=False),
)

fig.show()
```

[scattergl](https://plotly.com/python/reference/scattergl) traces do not support all numeric font weights. When you specify a numeric font weight on `scattergl`, weights up to 500 are mapped to the keyword font weight "normal", while weights above 500 are mapped to "bold".


## Text Case

**New in 5.23**

You can configure text case using the `textfont.textcase` property. In this example, we set `textfont.textcase="upper"` to transform the text on all bars to uppercase.

```python
import plotly.graph_objects as go
from plotly import data

df = data.gapminder()

grouped = df[df.year == 2007].loc[df[df.year == 2007].groupby('continent')['lifeExp'].idxmax()]

fig = go.Figure(
data=go.Bar(
x=grouped['lifeExp'],
y=grouped['continent'],
text=grouped['country'],
orientation='h',
textfont=dict(
family="sans serif",
size=14,
# Here we set textcase to "upper.
# Set to lower" for lowercase text, or "word caps" to capitalize the first letter of each word
textcase="upper"

)
),
layout=go.Layout(
title_text='Country with Highest Life Expectancy per Continent, 2007',
yaxis=dict(showticklabels=False)
)
)

fig.show()
```

## Text Lines

**New in 5.23**

You can add decoration lines to text using the `textfont.lineposition` property. This property accepts `"under"`, `"over"`, and `"through"`, or a combination of these separated by a `+`.

```python
import plotly.graph_objects as go
from plotly import data

df = data.gapminder()

grouped = df[df.year == 2002].loc[df[df.year == 2002].groupby('continent')['lifeExp'].idxmax()]

fig = go.Figure(
data=go.Bar(
x=grouped['lifeExp'],
y=grouped['continent'],
text=grouped['country'],
orientation='h',
marker_color='MediumSlateBlue',
textfont=dict(
lineposition="under" # combine different line positions with a "+" to add more than one: "under+over"
)
),
layout=go.Layout(
title_text='Country with Highest Life Expectancy per Continent, 2002',
yaxis=dict(showticklabels=False)
)
)

fig.show()
```

## Text Shadow

**New in 5.23**

You can apply a shadow effect to text using the `textfont.shadow` property. This property accepts shadow specifications in the same format as the [text-shadow CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow).

```python
import plotly.graph_objects as go
from plotly import data

df = data.gapminder()

grouped = df[df.year == 1997].loc[df[df.year == 1997].groupby('continent')['lifeExp'].idxmax()]

fig = go.Figure(
data=go.Bar(
x=grouped['lifeExp'],
y=grouped['continent'],
text=grouped['country'],
orientation='h',
textfont=dict(
shadow="1px 1px 2px pink"
)
),
layout=go.Layout(
title_text='Country with Highest Life Expectancy per Continent, 1997',
yaxis=dict(showticklabels=False)
)
)

fig.show()
```

### Styling and Coloring Annotations

```python
Expand Down
Loading