PlotlyグラフをHTML・画像で保存する方法【write_html / write_image】

Plotlyで作ったグラフは、用途に応じてHTMLまたはPNG・SVG・PDFで保存できます。HTMLなら拡大・ホバー・凡例の切り替えを残せて、静止画なら資料・論文・ブログへ貼りやすくなります。

最短の答えは、HTMLなら fig.write_html("graph.html")、画像なら fig.write_image("graph.png") です。ただし画像保存にはKaleidoとChromeが必要で、HTMLは設定によってファイル容量が大きく変わります。

まずは保存方法を選ぶ

やりたいこと	形式	コード
操作できるグラフを共有	HTML	`fig.write_html("graph.html")`
オフラインでもHTMLを開く	HTML	`include_plotlyjs=True`
HTMLを軽量化	HTML	`include_plotlyjs="cdn"`
Webページへ一部だけ埋め込む	HTML断片	`fig.to_html(full_html=False)`
資料やブログへ貼る	PNG	`fig.write_image("graph.png")`
拡大してもきれいな図が必要	SVG / PDF	`fig.write_image("graph.svg")`

サンプルグラフを作る

最初に保存対象となるグラフを用意します。Plotly ExpressでもGraph Objectsでも、保存方法は同じです。

import plotly.graph_objects as go

fig = go.Figure()
fig.add_trace(
    go.Scatter(
        x=["月", "火", "水", "木", "金", "土", "日"],
        y=[42, 55, 49, 68, 74, 61, 82],
        mode="lines+markers",
        name="アクセス数",
    )
)
fig.update_layout(
    title="週間アクセス数",
    xaxis_title="曜日",
    yaxis_title="アクセス数",
)
fig.show()

HTMLとして保存する：write_html

最小コード

fig.write_html("graph.html")

生成された graph.html をブラウザで開くと、ホバー・ズーム・範囲選択・凡例の切り替えをそのまま利用できます。

from pathlib import Path

output_dir = Path("output")
output_dir.mkdir(exist_ok=True)
fig.write_html(output_dir / "graph.html")

オフライン用と軽量版の違い

# 単体で完結。オフラインでも表示できるが、容量が大きい
fig.write_html(
    "graph-offline.html",
    include_plotlyjs=True,
    auto_open=False,
)

# 軽量。表示時にインターネット接続が必要
fig.write_html(
    "graph-cdn.html",
    include_plotlyjs="cdn",
    auto_open=False,
)

今回の同一グラフでは、自己完結型が約4.6MB、CDN参照型が約8KBになりました。共有相手がオフラインで開く可能性があるなら自己完結型、Web配信やメール添付で容量を抑えたいならCDN型が向いています。

保存後にブラウザを開く

fig.write_html("graph.html", auto_open=True)

自動処理やサーバー上で実行する場合は、予期せずブラウザを開かないよう auto_open=False を指定します。

HTMLの一部として埋め込む：to_html

graph_html = fig.to_html(
    full_html=False,
    include_plotlyjs="cdn",
    config={"responsive": True},
)

with open("graph-fragment.html", "w", encoding="utf-8") as f:
    f.write(graph_html)

full_html=False で生成した断片を単独ファイルとして使う場合はPlotly.jsを読み込む設定が必要です。include_plotlyjs=False のまま完全なHTMLとして保存すると、グラフが表示されません。

PNG・SVG・PDFとして保存する：write_image

必要なものをインストール

pip install --upgrade plotly kaleido

Kaleido v1以降は、実行環境に互換性のあるChromeまたはChromiumが必要です。Chromeがない環境では、次のどちらかで導入できます。

plotly_get_chrome

import plotly.io as pio
pio.get_chrome()

古い記事で案内されるOrcaは、現在の新規環境では選ばないでください。Plotly公式ドキュメントではOrca対応は2025年9月以降に削除予定とされており、Kaleidoが現行手段です。

PNG・JPEG・WebP・SVG・PDFを保存

fig.write_image("graph.png")
fig.write_image("graph.jpeg")
fig.write_image("graph.webp")
fig.write_image("graph.svg")
fig.write_image("graph.pdf")

サイズと解像度を指定

fig.write_image(
    "graph.png",
    width=1200,
    height=700,
    scale=2,
)

width・height：論理上の画像サイズ
scale：実際に書き出す解像度の倍率

Google Colabで保存・ダウンロードする

!pip install -q --upgrade plotly kaleido

fig.write_html("graph.html", include_plotlyjs=True)

from google.colab import files

files.download("graph.html")

fig.write_image("graph.png", width=1200, height=700, scale=2)
files.download("graph.png")

インストール直後に画像保存でエラーが出る場合は、Colabのランタイムを再起動してからセルを再実行します。

よくあるエラーと対処

Kaleidoが必要というエラー

Kaleidoが入っていない、またはNotebookのカーネルから認識されていません。pip install --upgrade kaleido の実行後にJupyterやColabのカーネルを再起動します。

ChromeNotFoundError

Kaleido v1以降はChromeを同梱していません。Chromeをインストールするか、plotly_get_chrome を実行します。

HTMLを開いてもグラフが表示されない

include_plotlyjs="cdn" の場合、インターネットへ接続しているか
full_html=True のファイルへ include_plotlyjs=False を指定していないか
WordPressの投稿欄で script タグが削除されていないか

WordPressではJavaScriptが除去・制限されることがあります。確実に表示したい場合は、グラフをPNGとして掲載し、操作可能なHTMLファイルへのリンクを併記する方法が安全です。

FileNotFoundError

from pathlib import Path

Path("output").mkdir(parents=True, exist_ok=True)
fig.write_html("output/graph.html")

HTMLファイルが大きすぎる

fig.write_html("graph.html", include_plotlyjs="cdn")

まとめ

操作できる状態を残すなら fig.write_html()
資料・論文・ブログへ貼るなら fig.write_image()
オフライン共有は include_plotlyjs=True
軽量なHTMLは include_plotlyjs="cdn"
静止画出力はKaleidoを使い、Kaleido v1以降はChromeも必要
Webページへ一部分だけ埋め込むなら fig.to_html(full_html=False)

迷った場合は、共有用に自己完結HTML、プレビュー用にPNGの2種類を同時に保存しておくと扱いやすくなります。