Plotly.Phoenix.Component (plotly_ex v0.3.0)

Phoenix function component for embedding Plotly charts.

Events and math

The hook forwards plotly_click, plotly_hover, plotly_unhover, plotly_selected, and plotly_relayout as "plotly_event" with type and data. Point events include points, xvals, yvals, xPixel, yPixel. Each point includes x, y, z, curveNumber, pointNumber, pointIndex, text, customdata, name, bbox, xPixel, and yPixel. Top-level pixels locate the cursor; point pixels locate the point centre. Missing values are nil; anywhere events have points: []. Axis values preserve date/category strings. Relayout keeps its original JSON shape.

The LiveView hook loads MathJax 4 on demand before rendering figures whose JSON contains $. An existing MathJax 3/4 engine is reused.

Setup

(Optional) Add a <script> tag to your app layout if you want to pre-load plotly.js yourself (e.g. from a CDN). If omitted, the hook and static_plot/2 will load it automatically via the CDN → jsdelivr → bundled fallback chain.
To enable the bundled fallback (served locally), mount the plug in your router:
```
forward "/plotly_ex", Plotly.Phoenix.Plug
```

import { PlotlyChart } from "../../deps/plotly_ex/priv/static/plotly_hook.js"
let liveSocket = new LiveSocket("/live", Socket, {
  hooks: { PlotlyChart }
})

Use in LiveView templates: <Plotly.Phoenix.Component.plot id="my-chart" figure={@figure} />

Summary

Functions

plot(assigns)

Render a Plotly chart in a Phoenix LiveView template.

static_plot(figure, opts \\ [])

Render a Plotly chart as static HTML for use in controller-rendered (non-LiveView) templates. Returns {:safe, html}.

Functions

plot(assigns)

Render a Plotly chart in a Phoenix LiveView template.

The chart updates automatically when the figure assign changes — the hook calls Plotly.react on each DOM patch, so only changed data is re-rendered.

Examples

# In your LiveView template (.heex):
<Plotly.Phoenix.Component.plot id="revenue-chart" figure={@figure} />

# With a CSS class for sizing:
<Plotly.Phoenix.Component.plot
  id="sales-chart"
  figure={@figure}
  class="h-96 w-full"
/>

# In your LiveView module — update the chart by reassigning @figure:
def handle_event("refresh", _params, socket) do
  {:noreply, assign(socket, figure: build_figure())}
end

Attributes

figure (:any) (required) - A Plotly.Figure struct to render.
id (:string) (required) - DOM ID for the chart container (must be unique per page).
class (:string) - Optional CSS class for the container div. Defaults to nil.

static_plot(figure, opts \\ [])

Render a Plotly chart as static HTML for use in controller-rendered (non-LiveView) templates. Returns {:safe, html}.

No manual <script> tag is required — the inline loader walks the CDN → jsdelivr → bundled fallback chain automatically. To enable the bundled fallback, mount Plotly.Phoenix.Plug in your router: forward "/plotly_ex", Plotly.Phoenix.Plug.

Example

# Controller:
render(conn, :index, figure: Plotly.bar(data, x: "month", y: "sales"))

# Template:
<%= Plotly.Phoenix.Component.static_plot(@figure, id: "my-chart") %>