How to use Plotly with PyScript

PyScript doesn’t support Plotly directly but there is a simple way around it

PyScript is a great idea — it let’s you write serverless web application entirely in Python and HTML.

I wrote an introductory article, Create an Interactive Web App with PyScript and Pandas, which describes how to write a fairly simple dashboard type app using the Pandas plotting functionality. But thought it would be a good idea to do a Plotly version of the same things.

Please take a look at the original article to familiarize yourself with the basic anatomy of a PyScript app as I’ll be building on that to produce the Plotly version.

The Web app

I’m going to run through a simple application written mostly in PyScript and HTML that reads data from a remote source and displays a simple dashboard where the user can select data to be shown in a Plotly chart.

My original app created charts using Pandas and rendering these in PyScript is built-in. You just have to write the resulting Matplotlib figure to the HTML tag where it should be displayed.

Things are a little more complicated when using Ploty because this support is not built in to PyScript. However, a slight modiifcation to the Python program and the…