Skip to content

Add Plotly.js docs updates for 6.3 #5269

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

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 34 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.3
jupytext_version: 1.17.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.14
version: 3.9.0
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 @@ -619,6 +619,38 @@ fig.update_yaxes(zeroline=True, zerolinewidth=2, zerolinecolor='LightPink')
fig.show()
```

##### Controlling zero line layer

*New in 6.3*

By default, zero lines are displayed below traces. Set `zerolinelayer="above traces"` on an axis to display its zero line above traces:

```python
import plotly.graph_objects as go

x = ['A', 'B', 'C', 'D', 'A']
y = [2, 0, 4, -3, 2]

fig = go.Figure(
data=[
go.Scatter(
x=x,
y=y,
fill='toself',
mode='none',
fillcolor='lightpink'
)
],
layout=dict(
yaxis=dict(
zerolinelayer="above traces" # Change to "below traces" to see the difference
),
)
)

fig.show()
```

#### Setting the Range of Axes Manually

The visible x and y axis range can be configured manually by setting the `range` axis property to a list of two values, the lower and upper bound.
Expand Down
44 changes: 42 additions & 2 deletions doc/python/legend.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.17.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.9.0
plotly:
description: How to configure and style the legend in Plotly with Python.
display_as: file_settings
Expand Down Expand Up @@ -254,6 +254,46 @@ fig.update_layout(legend=dict(
fig.show()
```

#### Legend Max Height

*New in 6.3*

By default, a legend can expand to fill up to half of the layout area height for a horizontal legend and the full height for a vertical legend. You can specify the maximum height of a legend with the `maxheight` parameter. In the following plot with many legend items, we set `maxheight` to a ratio of 0.10, giving the plot more space.

```python
import plotly.express as px
from plotly import data

df = data.gapminder().query("year==2007 and continent == 'Europe'")

fig = px.scatter(df,
x="gdpPercap",
y="lifeExp",
color="country",
size="pop",
size_max=45,
title="Life Expectancy vs. GDP per Capita in 2007 (by Country)",
labels={"gdpPercap": "GDP per Capita"},
)

fig.update_layout(
xaxis=dict(
side="top"
),
legend=dict(
orientation="h",
yanchor="bottom",
y=-0.35,
xanchor="center",
x=0.5,
maxheight=0.1, # Comment maxheight to see legend take up 0.5 of plotting area
title_text="Country"
),
)

fig.show()
```

#### Styling Legends

Legends support many styling options.
Expand Down
53 changes: 51 additions & 2 deletions doc/python/pattern-hatching-texture.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.6
jupytext_version: 1.17.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.9.0
plotly:
description: How to use patterns (also known as hatching or texture) with bar
charts.
Expand Down Expand Up @@ -150,6 +150,55 @@ fig.add_trace(go.Bar(x=["a","b"], y=[2,3], marker_pattern_shape="+"))
fig.show()
```

### Patterns Using SVG Paths

*New in 6.3*

You can make custom patterns for graphs by using an SVG path. Set `marker.pattern.path` to the SVG path to use:

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

df = plotly.data.gapminder().query("year == 2007 and continent == 'Europe'").copy()
df['gdp'] = df['gdpPercap'] * df['pop']
df = df.sort_values('gdp', ascending=False).head(4)

fig = go.Figure(
data=[go.Bar(
x=df['country'],
y=df['gdp'],
marker=dict(
color=["lightsteelblue", "mistyrose", "palegreen", "thistle"],
pattern=dict(
path=[
"M0,0H4V4H0Z",
"M0,0H6V6Z",
"M0,0V4H4Z",
"M0,0C0,2,4,2,4,4C4,6,0,6,0,8H2C2,6,6,6,6,4C6,2,2,2,2,0Z"
],
fgcolor=["midnightblue", "crimson", "seagreen", "indigo"],
bgcolor=["mintcream", "lavenderblush", "azure", "honeydew"],
size=20,
solidity=0.7
)
),
name="GDP (2007)"
)],
layout=dict(
title="Top 4 European Countries by GDP (Gapminder 2007) with Custom SVG Path Patterns",
xaxis_title="Country",
yaxis_title="GDP (USD)",
yaxis_tickformat="$.2s",
width=800,
height=500,
bargap=0.3
)
)

fig.show()
```

#### Reference

See https://plotly.com/python/reference/bar/ for more information and chart attribute options!