Bug: Exporting as HTML (New Issues as of v.3.0.1)
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 18.3k
- Forks
- 2k
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 28
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue with the provided exportAsHTML function, the affected chart data and layout, and the latest Plotly client loaded from the CDN. Compare the original React Plotly chart with the downloaded HTML output and isolate whether data is lost or mutated during export or rendering. Done means the exported HTML preserves the chart data and shape.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Needs clarification
- Newbie friendliness
- 38/100