![]() |
Summary | Embed Plotly graphs into posts from an equation |
![]() |
Repository | GitHub - NateDhaliwal/discourse-graph-embed |
![]() |
Install Guide | How to install a theme or theme component |
![]() |
New to Discourse Themes? | Beginner’s guide to using Discourse Themes |
Install this theme component
This component allows users to add graphs using Plotly.js 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 (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!
Button label and title are editable as theme translations ↩︎