Interactive HTML Export in Julia

Interactive vs Static Export

Plotly figures are interactive when viewed in a web browser: you can hover over data points, pan and zoom axes, and show and hide traces by clicking or double-clicking on the legend. You can export figures either to [static image file formats like PNG, JPEG, SVG or PDF] or you can export them to HTML files which can be opened in a browser. This page explains how to do the latter.

Saving to an HTML file

Any figure can be saved as an HTML file using the PlotlyBase.to_html method. These HTML files can be opened in any web browser to access the fully interactive figure.

using PlotlyJS
p = plot(scatter(x=1:10, y=1:10))

open("./example.html", "w") do io
    PlotlyBase.to_html(io, p.plot)
end

Controlling the size of the HTML file

By default, the resulting HTML file is a fully self-contained HTML file which can be uploaded to a web server or shared via email or other file-sharing mechanisms. The downside to this approach is that the file is very large (5Mb+) because it contains an inlined copy of the Plotly.js library required to make the figure interactive. This can be controlled via the include_plotlyjs argument (see below).

Full Parameter Documentation

using PlotlyJS

@doc PlotlyBase.to_html

to_html(
    io::IO,
    p::Plot;
    autoplay::Bool=true,
    include_plotlyjs::Union{String,Missing}="cdn",
    include_mathjax::Union{String,Missing}="cdn",
    post_script::Union{String,Missing}=missing,
    full_html::Bool=true,
    animation_opts::Union{Dict,Missing}=missing,
    default_width::String="100%",
    default_height::String="100%"
)

• io: IO stream to write to

• p: Plot to save

• autoplay: Should animations start automatically

• include_plotlyjs: How to include plotly.js. Options are

  • cdn: include a <script> tag to load plotly.js from cdn. Output will be standalone

  • require: load using requirejs. Useful in Jupyter notebooks

  • require-loaded: assume a plotly statement has already loaded via requirejs (don't load it in context of this plot)

  • directory: hardcode <script src="plotly.min.js> – will only work when the plotly.min.js file is in the same directory as the output file

  • anything ending in js: we assume you give us the path to the plotly.js file. We will read it in and include it inline in the output. Works best when points to a minified file (plotly.min.js)

• include_mathjax: How mathjax should be included. Options are

  • string ending in .js: we load via <script src="$(include_mathjax)">. You are responsible for making sure it resolves

  • anything else: we load via cdn for you

• post_script: arbitrary javascript to run after plotly.js finishes drawing the plot

• full_html: include all parts necessary for standalone html file

• animation_opts: extra options used to control animation. included in addFrames call after the actual frames. See plotly.js docs for more info on addFrames

• default_width: valid css specifier for width

• default_height: valid css specifier for height