Plotly allows to export the figure by clicking the little "camera" button. The format can be defined with the following configuration :
config: {
responsive: true,
displayModeBar: true,
staticPlot: true,
toImageButtonOptions: {
format: 'svg', // one of png, svg, jpeg, webp
height: 500,
width: 700,
scale: 1 // Multiply title/legend/axis/canvas sizes by this factor
}
}
I would like to propose our users different export formats from the plotly graphics (svg and png). It looks like the export allows only 1 value, there is any way to force it to propose multiple format ?
The config you're referring to is just setting the default download/screenshot button.
For custom download formats you need to create custom buttons and run Plotly.toImage() multiple times to retrieve all data urls.
In this example you see simple <a> elements, because they offer a simple option to create downloads via data url.
<a
download="chart.jpg"
href="" class="download download-jpg"
data-format="jpeg"
data-dimensions="640x480">
Download jpg
</a>
Output format and dimensions are defined by a data-attribute.
var trace1 = {
x: [0, 1, 2, 3, 4, 5, 6],
y: [1, 9, 4, 7, 5, 2, 4],
mode: 'markers',
marker: {
size: [20, 40, 25, 10, 60, 90, 30],
}
};
var data = [trace1];
var layout = {
legend: {
y: 0.5,
traceorder: 'reversed',
font: {size: 16},
yref: 'paper'
}};
Plotly.newPlot('graph', data, layout);
var myPlot = document.getElementById('graph');
var btns = document.querySelectorAll('.download');
if(btns.length){
for(var i=0; i<btns.length; i++){
let thisbtn = btns[i];
let dataType = thisbtn.getAttribute('data-format');
let imgDimensions = thisbtn.getAttribute('data-dimensions');
let H = 800;
let W = 600;
if(imgDimensions.indexOf('x')!==-1){
let dimArr = imgDimensions.split('x');
H = +dimArr[0];
W = +dimArr[1];
}
Plotly.toImage(myPlot,
{format: dataType, width: H, height: W}).then(function(dataUrl) {
var downloadBtn = document.querySelector('[data-format="'+dataType+'"]');
downloadBtn.href=dataUrl;
})
}
}.download {
border: 1px solid #ccc;
padding: 0.3em;
text-decoration:none;
display:inline-block;
}<script src="https://cdn.plot.ly/plotly-1.34.0.min.js"></script>
<div id="graph"></div>
<p class="downloads">
<a download="chart.jpg" href="" class="download download-jpg" data-format="jpeg" data-dimensions="640x480">Download jpg</a>
<a download="chart.png" href="" class="download download-png" data-format="png" data-dimensions="800x800">Download png</a>
<a download="chart.svg" href="" class="download download-svg" data-format="svg" data-dimensions="900x600">Download svg</a>
</p>