Description
Hey, I have been using plotly.js within my react application for several months now.
I never noticed this issue before but my users have started to report the following issue as of today, and I wonder if its linked to the latest release of plotlyjs.
In my React app I'm using a combination of react plotly and plotlyjs for various bits of functionality.
The key bit thats relevant here, is exporting charts as HTML.
Since the js client has no .to_html method like the python client does, I had to do this with a bit of a workaround as suggested by other people online.
// Function to export as HTML
const exportAsHTML = (chartData: ChartData, fileName: string) => {
const plotlyScript = `
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#plotly-chart {
width: 100%;
height: 100%;
}
</style>
<div id="plotly-chart"></div>
<script>
var data = ${JSON.stringify(chartData.data)};
var layout = ${JSON.stringify(chartData.layout)};
Plotly.newPlot('plotly-chart', data, layout);
</script>
`;
const blob = new Blob([plotlyScript], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
};
Basically I'm creating the HTML skeleton myself and passing in the chart data / layout to be read by the embedded plotly client.
Here i'm explicitly importing the latest version of plotlyjs via the <script/> tag
Now as for the results. The html version of the chart is either missing data entirely, or the data has been mutated such that it doesn't match the original chart.
A couple of examples are below.
EXAMPLE A
This chart (plotted using React Plotly)
Becomes the following (missing data entirely)
EXAMPLE B
This chart (plotted using React Plotly)
Becomes the following (shape of data changed drastically)
Obviously this is a major issue and if not fixed could mislead our data analysts.
The only solution i can think of for now is to create a python backend endpoint to take the chart data and layout and use the python libraries to_html function to send back the html, but this seems unnecessarily convoluted.
Now, it could be that I have been taking the wrong approach the whole time, but I'd be surprised if this was the case since the feature has been live for months and has only now been reported as buggy. Hence why I suspect its to do with the latest release (21 hours ago as of writing this)
As a sidenote, why on earth isn't there a built in .to_html method in the javascript client library? The disparity between this and the python library is confusing.
Any guidance is appreciated.
Best,
Pat