Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Using Plotly with Axios: Parallel Coordinates crashes while the other charts work fine/Rendering raw HTML

Hi!
I’ve been stuck at this for days now. Basically I have a simple flask server which servers some simple hard-coded charts using
json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)

On the other end, I have a simple boilerplate React script (I don’t really know React but that doesn’t matter) with some Axios requests in the form of

handlePlot1 = () => {
 Axios.get("http://localhost:9000/plot2_json").then(resp => {console.log(resp.data); Plotly.newPlot('distChart',resp.data.data,resp.data.layout);})
 }

And for a long time, it didn’t work. It always crashed for parallel coordinates giving an error regarding Fragment shader. I then tried this exact same code with Sankey diagram and some Scatterplots and they work as is. The react script simply has some buttons and an empty <div> where the charts show so I don’t THINK I need React knowledge for this. It just doesn’t work for Parallel Coordinates in specific but works for everything else. I also tried something like

graphJSON = json.dumps(fig2, cls=plotly.utils.PlotlyJSONEncoder)
return render_template('layouts/index.html', plot=graphJSON)

with some simple code standalone and the parallel coordinates appear fine this way. But returning it to a client who requested using Axios just doesn’t work, or at least I don’t know how to make it work. I’m currently trying the offline plotting method and sending a raw HTML string which isn’t working either (unless I use an iframe which I really don’t want to use).

I did Google around a lot, there’s just one similar scenario (https://github.com/plotly/plotly.js/issues/3936) which the poster fixed by rebuilding Plotly using Webpack which is kind of an overkill and I’m really short on time to learn about whatever Webpack etc. is (running npm run eject failed for me anyway). Also most people suggest using the normal Plotly distributions are enough and I’m not really worried about saving space/memory and I can afford to import the entire plotly.js file.

Is there any way I can just make this raw HTML string work into a simple <div> using simple JavaScript? Right now, just setting .innerHTML doesn’t work. I suppose I need to render it somehow. I’m getting the string simply as a <div></div> using return plot(fig, include_plotlyjs='cdn', include_mathjax='cdn', output_type='div')