# htmx-plotly [](https://www.jsdelivr.com/package/gh/ocramz/htmx-plotly)
An [htmx](https://htmx.org) [extension](https://htmx.org/extensions/) to update ("restyle") [plotly.js](https://plotly.com/javascript/) plots.
This approach is much faster than recreating the whole plot, but since HTMX natively receives HTML from the server, we need this extension to receive JSON with the new plot data instead, and trigger Plotly to re-render.
Possible applications include: simple dashboards, data apps, and similar.
### Installation
First load HTMX and Plotly in the `` of your file:
```html
```
And right after, load `htmx-plotly`:
```html
```
### Usage
Add these attributes to a page element:
* `hx-ext="htmx-plotly"` means this element uses the extension
* `hx-post="/get-data"` the HTTP endpoint that returns the new plot data
* `plot-id="my-plot"` ID of the DOM element that hosts the Plotly chart.
Example: here we make an `` text link trigger the update of the plot within element `my-plot`:
```html
UPDATE
```
NB: As of `v0.3` the HTMX swap mechanism works once more as expected: this extension now receives an *object* from the server, which
is unpacked into Plotly restyle data and HTML markup.
### Setup (frontend)
Plotly charts need an empty div element as well as a script tag for initialization:
```html
```
```html
```
### Setup (backend)
*Warning:* The JSON data produced by the server must follow the Plotly
[`newPlot` calling signature](https://plotly.com/javascript/plotlyjs-function-reference/#plotlynewplot):
the object must contain the `data` key (and optionally `layout`, `config` and `frames` keys)
* Since v0.4: use [`plotly_htmx_utils.py`](https://cdn.jsdelivr.net/gh/ocramz/htmx-plotly@0.4/plotly_htmx_utils.py)
to convert between Plotly objects and restyle-friendly JSON.:
## Tested with
* plotly.js 2.27
* htmx 1.9.10
### Warning
Beta-level software, feel free to file issues on github or even better submit PRs.
(c) 2023- Marco Zocca