Working with Figures¶

All methods return a Plotly Figure that can be modified and exported.

In [1]:

import plotly.express as px
import plotly.graph_objects as go
import xarray as xr

from xarray_plotly import config, xpx

config.notebook()

import plotly.express as px import plotly.graph_objects as go import xarray as xr from xarray_plotly import config, xpx config.notebook()

In [2]:

df = px.data.stocks().set_index("date")
df.index = df.index.astype("datetime64[ns]")

stocks = xr.DataArray(
    df.values,
    dims=["date", "company"],
    coords={"date": df.index, "company": df.columns.tolist()},
    name="price",
)

df = px.data.stocks().set_index("date") df.index = df.index.astype("datetime64[ns]") stocks = xr.DataArray( df.values, dims=["date", "company"], coords={"date": df.index, "company": df.columns.tolist()}, name="price", )

update_layout¶

Modify layout properties: title, legend, margins, fonts.

In [3]:

fig = xpx(stocks).line()
fig.update_layout(
    title={"text": "Stock Prices", "x": 0.5},
    legend={"orientation": "h", "y": 1.02},
)
fig

fig = xpx(stocks).line() fig.update_layout( title={"text": "Stock Prices", "x": 0.5}, legend={"orientation": "h", "y": 1.02}, ) fig

update_traces¶

Modify trace properties: line width, markers, opacity.

In [4]:

fig = xpx(stocks).line()
fig.update_traces(line={"width": 3})
fig

fig = xpx(stocks).line() fig.update_traces(line={"width": 3}) fig

In [5]:

fig = xpx(stocks).scatter()
fig.update_traces(marker={"size": 10, "opacity": 0.7})
fig

fig = xpx(stocks).scatter() fig.update_traces(marker={"size": 10, "opacity": 0.7}) fig

update_xaxes / update_yaxes¶

Modify axis properties.

In [6]:

fig = xpx(stocks).line()
fig.update_xaxes(rangeslider_visible=True)
fig.update_yaxes(tickformat=".0%")
fig

fig = xpx(stocks).line() fig.update_xaxes(rangeslider_visible=True) fig.update_yaxes(tickformat=".0%") fig

add_hline / add_vline¶

Add reference lines. See shapes.

In [7]:

fig = xpx(stocks).line()
fig.add_hline(y=1.0, line_dash="dash", line_color="gray", annotation_text="Baseline")
fig.add_vline(x="2018-10-01", line_dash="dot", line_color="red")
fig

fig = xpx(stocks).line() fig.add_hline(y=1.0, line_dash="dash", line_color="gray", annotation_text="Baseline") fig.add_vline(x="2018-10-01", line_dash="dot", line_color="red") fig

add_annotation¶

Add text annotations. See annotations.

In [8]:

fig = xpx(stocks).line()
fig.add_annotation(x="2018-10-01", y=1.4, text="Peak", showarrow=True, arrowhead=2)
fig

fig = xpx(stocks).line() fig.add_annotation(x="2018-10-01", y=1.4, text="Peak", showarrow=True, arrowhead=2) fig

add_trace¶

Add custom traces using Graph Objects.

In [9]:

fig = xpx(stocks.sel(company="GOOG")).line()

# Add moving average
goog = stocks.sel(company="GOOG")
ma = goog.rolling(date=20, center=True).mean()

fig.add_trace(
    go.Scatter(
        x=ma.coords["date"].values,
        y=ma.values,
        mode="lines",
        name="20-day MA",
        line={"dash": "dash", "color": "red"},
    )
)
fig

fig = xpx(stocks.sel(company="GOOG")).line() # Add moving average goog = stocks.sel(company="GOOG") ma = goog.rolling(date=20, center=True).mean() fig.add_trace( go.Scatter( x=ma.coords["date"].values, y=ma.values, mode="lines", name="20-day MA", line={"dash": "dash", "color": "red"}, ) ) fig

Export¶

HTML¶

See HTML export.

fig.write_html("plot.html")
fig.write_html("plot.html", include_plotlyjs="cdn")  # smaller file

Images¶

Requires kaleido: pip install kaleido

See static image export.

fig.write_image("plot.png")
fig.write_image("plot.png", scale=2)  # higher resolution
fig.write_image("plot.svg")
fig.write_image("plot.pdf")