{"id":17331953,"url":"https://github.com/ocramz/htmx-plotly","last_synced_at":"2025-04-14T18:05:34.771Z","repository":{"id":215876983,"uuid":"739940388","full_name":"ocramz/htmx-plotly","owner":"ocramz","description":"An htmx extension to update plotly.js charts","archived":false,"fork":false,"pushed_at":"2024-02-05T10:37:22.000Z","size":38,"stargazers_count":11,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-14T18:05:19.287Z","etag":null,"topics":["dashboards","data-apps","data-visualization","htmx","htmx-extension","plotly","plotlyjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ocramz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2024-01-07T02:20:02.000Z","updated_at":"2025-02-17T06:59:38.000Z","dependencies_parsed_at":"2024-01-13T04:11:49.453Z","dependency_job_id":null,"html_url":"https://github.com/ocramz/htmx-plotly","commit_stats":{"total_commits":25,"total_committers":1,"mean_commits":25.0,"dds":0.0,"last_synced_commit":"c38d2e30eaff74865b2c0ec74bead93c2264c816"},"previous_names":["ocramz/htmx-plotly"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ocramz%2Fhtmx-plotly","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ocramz%2Fhtmx-plotly/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ocramz%2Fhtmx-plotly/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ocramz%2Fhtmx-plotly/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ocramz","download_url":"https://codeload.github.com/ocramz/htmx-plotly/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248933341,"owners_count":21185460,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dashboards","data-apps","data-visualization","htmx","htmx-extension","plotly","plotlyjs"],"created_at":"2024-10-15T14:56:08.603Z","updated_at":"2025-04-14T18:05:34.730Z","avatar_url":"https://github.com/ocramz.png","language":"JavaScript","readme":"# htmx-plotly [![](https://data.jsdelivr.com/v1/package/gh/ocramz/htmx-plotly/badge)](https://www.jsdelivr.com/package/gh/ocramz/htmx-plotly)\n\n\nAn [htmx](https://htmx.org) [extension](https://htmx.org/extensions/) to update (\"restyle\") [plotly.js](https://plotly.com/javascript/) plots.\nThis 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.\n\nPossible applications include: simple dashboards, data apps, and similar.\n\n### Installation\n\nFirst load HTMX and Plotly in the `\u003chead\u003e` of your file:\n\n```html\n\u003cscript src=\"https://unpkg.com/htmx.org@1.9.10\" integrity=\"sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\" charset=\"utf-8\"\u003e\u003c/script\u003e\n```\n\nAnd right after, load `htmx-plotly`: \n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/ocramz/htmx-plotly@0.4/htmx-plotly.js\" integrity=\"sha256-FgvTlDVvVXn0uoRXC9MLfkxAsu9AOoGMxFRwc7If9Cg=\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n```\n\n### Usage\n\nAdd these attributes to a page element: \n* `hx-ext=\"htmx-plotly\"` means this element uses the extension\n* `hx-post=\"/get-data\"` the HTTP endpoint that returns the new plot data\n* `plot-id=\"my-plot\"` ID of the DOM element that hosts the Plotly chart.\n\nExample: here we make an `\u003ca\u003e` text link trigger the update of the plot within element `my-plot`:\n\n```html\n\u003ca href=\"#\" hx-ext=\"htmx-plotly\" hx-post=\"/get-data\" plot-id=\"my-plot\"\u003e\u003ch1\u003eUPDATE\u003c/h1\u003e\u003c/a\u003e\n```\n\nNB: As of `v0.3` the HTMX swap mechanism works once more as expected: this extension now receives an *object* from the server, which\nis unpacked into Plotly restyle data and HTML markup.\n\n### Setup (frontend)\n\nPlotly charts need an empty div element as well as a script tag for initialization:\n\n```html\n\u003cdiv id=\"my-plot\"\u003e\u003c/div\u003e\n```\n\n```html\n\u003cscript\u003e\nplotDiv = document.getElementById('my-plot');\n\nplotlyTestData = [{x: [0,1,2], y: [5,6,10]}]\n\nPlotly.newPlot( plotDiv, \n    plotlyTestData, \n    {margin: { t: 0 } } \n);\n\u003c/script\u003e\n```\n\n### Setup (backend)\n\n*Warning:* The JSON data produced by the server must follow the Plotly \n[`newPlot` calling signature](https://plotly.com/javascript/plotlyjs-function-reference/#plotlynewplot):\nthe object must contain the `data` key (and optionally `layout`, `config` and `frames` keys)\n\n* Since v0.4: use [`plotly_htmx_utils.py`](https://cdn.jsdelivr.net/gh/ocramz/htmx-plotly@0.4/plotly_htmx_utils.py) \n  to convert between Plotly objects and restyle-friendly JSON.:\n\n\n## Tested with\n\n* plotly.js 2.27\n* htmx 1.9.10\n\n\n### Warning\n\nBeta-level software, feel free to file issues on github or even better submit PRs.\n\n\n(c) 2023- Marco Zocca ","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Focramz%2Fhtmx-plotly","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Focramz%2Fhtmx-plotly","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Focramz%2Fhtmx-plotly/lists"}