hx-plot playground

An htmx extension for rendering Vega-Lite charts from JSON — add hx-ext="plot" to any element and point it at a JSON spec. GitHub · Powered by a service worker, works offline after first load. ⧗ registering…

Live sine wave (polling every 1s via service worker)

Usage

Include htmx and hx-plot, then use hx-ext="plot" on any element.

Inline JSON

<script src="https://unpkg.com/htmx.org@2"></script>
<script src="https://c-cube.github.io/hx-plot/hx-plot.full.min.js"></script>

<script id="spec" type="application/json">
{
  "mark": "point",
  "data": {"values": [{"x": 1, "y": 2}, {"x": 2, "y": 4}]},
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"}
  }
}
</script>

<div hx-ext="plot" hx-plot="#spec" hx-target="#chart"></div>
<div id="chart"></div>

Fetch from URL

<div hx-ext="plot"
     hx-get="/api/chart"
     hx-trigger="load"
     hx-target="#chart"></div>
<div id="chart"></div>

Live updates every 2s with view transitions

<div hx-ext="plot"
     hx-get="/api/chart"
     hx-trigger="load, every 2s"
     hx-target="#chart"
     hx-swap="innerHTML transition:true"></div>
<div id="chart" style="view-transition-name: my-chart"></div>