# Discourse Graph (Plotly) Embed
**URL:** https://meta.discourse.org/t/discourse-graph-plotly-embed/380193
**Category:** Theme component
**Created:** [August 25, 2025, 2:34pm UTC](https://meta.discourse.org/t/discourse-graph-plotly-embed/380193 "2025-08-25T14:34:46Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [August 25, 2025, 2:34pm UTC](https://meta.discourse.org/t/discourse-graph-plotly-embed/380193/1 "2025-08-25T14:34:46Z")
| | | |
| --- | --- | --- |
| ℹ | **Summary** | Embed Plotly graphs into posts from an equation |
| 🛠 | **Repository** | [GitHub - NateDhaliwal/discourse-graph-embed · GitHub](https://github.com/NateDhaliwal/discourse-graph-embed) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
This component allows users to add graphs using [Plotly.js](https://plotly.com/javascript) to their topics and replies.
To use this, click the  (📈) icon in the formatting toolbar. Then, simply edit the equation inside the `[wrap][/wrap]`. (By sheer coincidence, I found out that backticks in the wrap didn’t affect anything)
For example:
Also, you can hover on the graph to find coordinates of points:
I originally tried to use a Desmos embed but that didn’t work out that well. Plotly (no affiliation) is a great library (and open-source too!) that can do this, paired with [MathJS](https://mathjs.org) (also open-source) to run the calculations.
Plotly allows you to also use things like sin, cosine and tangent, as well as logarithms (base 10) and others.
With Plotly, you can also download the graph as a PNG by clicking on the 📷 icon in the embed at the top-right.
> ⚠ NOTE: Graphs of trigonometric functions (e.g. `sin`, `cos`, `tan`) are not ‘curved’ and they end up kind of pointy.
Optionally, you can enable the setting `show_graph_in_modal` (default off) to display the graph in a modal popup instead of below the post, so it doesn’t take up so much space.
In the modal, click the button Load Graph\[1\] to load and display the graph.
Post:
Modal:
I hope this is useful!
* * *
1. Button label and title are editable as theme translations
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [August 25, 2025, 4:24pm UTC](https://meta.discourse.org/t/discourse-graph-plotly-embed/380193/2 "2025-08-25T16:24:50Z")
The icon is quite… should I describe it pale 😂
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [August 25, 2025, 11:18pm UTC](https://meta.discourse.org/t/discourse-graph-plotly-embed/380193/3 "2025-08-25T23:18:27Z")
I’ve pushed a fix. Does it work now?
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [August 26, 2025, 7:12am UTC](https://meta.discourse.org/t/discourse-graph-plotly-embed/380193/4 "2025-08-26T07:12:29Z")
Beautifully. Thanks.
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [September 9, 2025, 5:10am UTC](https://meta.discourse.org/t/discourse-graph-plotly-embed/380193/5 "2025-09-09T05:10:23Z")
I have added a new setting `show_graph_in_modal` to display the graph in a modal popup instead of below the post, so it doesn’t take up so much space.
In the modal, click the button Load Graph\[1\] to, well, load and display the graph.
Post:
Modal:
* * *
1. Button label and title are editable as theme translations
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [September 9, 2025, 12:11pm UTC](https://meta.discourse.org/t/discourse-graph-plotly-embed/380193/6 "2025-09-09T12:11:17Z")
this is pretty cool. nice work Nate 👍