Skip to content

pl-figure element

Display a statically or dynamically generated image. Supports many image file formats, including PNG, JPEG, and SVG.

Warning

This elements does not support PDF files. To make a PDF file available for download, use the pl-file-download element.

Sample element

Screenshot of the pl-figure element

question.html
<!-- show a figure from an existing file -->
<pl-figure file-name="figure.png" directory="clientFilesCourse"></pl-figure>

<!-- show a figure from a file that is generated by code -->
<pl-figure file-name="figure.png" type="dynamic"></pl-figure>

Customizations

Attribute Type Default Description
alt string "" Provide alt (alternative) text to improve accessibility of figures by describing the image or the purpose of the image. Default is an empty string.
directory string "clientFilesQuestion" The directory that contains the file, either "clientFilesQuestion" or clientFilesCourse (see client and server files). A directory cannot be specified if type="dynamic".
display "block" or "inline" "block" Display figure inline with text ("inline") or on a separate line ("block").
file-name string — Name of image file.
type "static" or "dynamic" "static" Type of file, either 'static' (an existing file) or 'dynamic' (a file generated by element or server code).
width number — Width of the image in pixels, e.g. 250.

Dynamically generated figures

If type="dynamic", then the contents of the image file must be returned by a function file() that is located either in element code or in server.py. The contents must be a string (with utf-8 encoding), a bytes-like object, or a file-like object. The filename will be available to this function as data["filename"]. For example, to generate the figure.png for the dynamic pl-figure above, this code might appear in server.py to generate a "fake" figure.png:

server.py
def file(data):
    if data["filename"] == "figure.png":
        plt.plot([1,2,3], [3,4,-2])
        buf = io.BytesIO()
        plt.savefig(buf, format="png")
        return buf

If file() does not return anything, it will be treated as if file() returned the empty string.

Example implementations

See also