I have a Plotly on my webpage and you can download it as a png by clicking the picture icon in the modebar. However when I click it, it downloads it as a png with the name new-plot, how can I give it a custom name?
My current code (var data is just data, so left it out) :
var layout = {
showlegend: true,
legend: {
x: 0,
y: 1
},
xaxis: {
title: 'Date',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
},
yaxis: {
title: 'Sales',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
}
};
var options = {
scrollZoom: true,
showLink: false,
modeBarButtonsToRemove: ['zoom2d', 'pan', 'pan2d', 'sendDataToCloud', 'hoverClosestCartesian', 'autoScale2d'],
displaylogo: false,
displayModeBar: true,
};
Plotly.newPlot('tester', data, layout, options);
I have a Plotly on my webpage and you can download it as a png by clicking the picture icon in the modebar. However when I click it, it downloads it as a png with the name new-plot, how can I give it a custom name?
My current code (var data is just data, so left it out) :
var layout = {
showlegend: true,
legend: {
x: 0,
y: 1
},
xaxis: {
title: 'Date',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
},
yaxis: {
title: 'Sales',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
}
};
var options = {
scrollZoom: true,
showLink: false,
modeBarButtonsToRemove: ['zoom2d', 'pan', 'pan2d', 'sendDataToCloud', 'hoverClosestCartesian', 'autoScale2d'],
displaylogo: false,
displayModeBar: true,
};
Plotly.newPlot('tester', data, layout, options);
Share
Improve this question
edited Jul 14, 2017 at 13:59
LatentDenis
2,99113 gold badges52 silver badges104 bronze badges
asked Jul 14, 2017 at 13:46
fangiofangio
1,7965 gold badges29 silver badges56 bronze badges
2 Answers
Reset to default 7Use Plotly.downloadImage
https://plot.ly/javascript/plotlyjs-function-reference/#plotlydownloadimage
Add this to your modebar setup for the button callback:
Plotly.downloadImage({
filename: 'customNamedImage',
format: 'png', //also can use 'jpeg', 'webp', 'svg'
height: 500,
width: 500
});
Edit:
I ran a custom example and I think you will want to custimze your own download button in the modebar, like so:
Plotly.newPlot(gd, [{
y: [1, 2, 1],
line: { shape: 'spline' }
}], {
title: 'custom modebar button',
width: 400,
height: 700
}, {
showTips: false,
displayModeBar: true,
modeBarButtons: [[{
name: 'custom download button',
icon: Plotly.Icons.camera,
click: function (gd) {
Plotly.downloadImage(gd, {
filename: 'your_custom_name',
format: 'jpeg',
width: gd._fullLayout.width,
height: gd._fullLayout.height
})
}
}, 'toImage'
], []]
})
There's an easier way to do this in newer versions of Plotly (v1.38+). Use the toImageButtonOptions
parameter in the config like this:
Plotly.newPlot(graphDiv, data, layout, {
toImageButtonOptions: {
filename: 'image_filename',
width: 800,
height: 600,
format: 'png'
}
});
You can leave out options you don't need to use the defaults.