ReferenceSpecializedShow a matplotlib figure.

MatPlotLibPlot

Description

MatPlotLibPlot puts a chart on your page. You draw the chart with the matplotlib library's usual commands (plt.plot, plt.bar, and so on), then place MatPlotLibPlot() in the page where the picture should appear. The component captures whatever figure matplotlib currently has open and embeds it as an image.

Syntax

MatPlotLibPlot()
MatPlotLibPlot(extra_matplotlib_settings)

Parameters

Parameter	Type	Default	Meaning
`extra_matplotlib_settings`	`dict`	`{}`	Settings passed to matplotlib when saving the figure, like `{"format": "svg"}`. The format must be `"png"` (the default) or `"svg"`.
`close_automatically`	`bool`	`True`	Close the figure after rendering, so the next chart starts fresh.

Examples

Draw first, then place the component:

from drafter import *
from dataclasses import dataclass
import matplotlib.pyplot as plt


@dataclass
class State:
    pass


@route
def index(state: State) -> Page:
    plt.plot([12, 15, 11, 18, 16, 20])
    plt.title("Treats eaten by Ada this week")
    return Page(state, [
        Header("Treat Tracker"),
        MatPlotLibPlot()
    ])


start_server(State())

The chart can be driven by state, so it changes as the data does:

from drafter import *
from dataclasses import dataclass
import matplotlib.pyplot as plt


@dataclass
class State:
    naps: list[int]


@route
def index(state: State) -> Page:
    plt.bar(range(len(state.naps)), state.naps)
    plt.title("Captain's naps per day")
    return Page(state, [
        Header("Nap Chart"),
        MatPlotLibPlot(),
        Button("Record a lazy day", "lazy_day")
    ])


@route
def lazy_day(state: State) -> Page:
    state.naps.append(state.naps[-1] + 1)
    return index(state)


start_server(State([3, 4, 2]))

Notes

The component shows the figure that is open at the moment the page renders, so run your plt. commands inside the route, before returning the Page.
The first page that uses matplotlib in the browser takes a while to appear: the library is downloaded and installed on demand. Later pages reuse it.
By default the figure closes after rendering. If you draw one figure and show it twice on the same page, pass close_automatically=False to the first MatPlotLibPlot.
The chart is a picture: visitors cannot hover or zoom it.
To store a chart in state or offer it as a download, call the component's to_picture() method to get a Picture value.

Image: show a picture that is not a chart.
Download: let visitors save the chart file.