Custom Modebar Button Ordering

plotly.js
6

Here’s some sample code for reordering and styling individual buttons in the bar:

modeBarButtons: [[
	{
		name: 'download',
		attr: 'download',
		title: 'Download as Image',
		icon: {
			width: 10, height: 10,
			path: 'M5,1 L5,8 L2,5 L5,8 L8,5 M2,9 L8,9'
		},
		click: onClickDownloadImage
	}
	],['zoom2d', 'pan2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d'
]]

So we’re swapping in a custom Download as Image button, with our own download (down arrow) icon instead of the default camera icon. The icon SVG expects strokes, not fill (the Plotly icons use fill by default), so we’re going to need to style it in a moment. And then we’ve got our own custom order and selection of the default buttons - zoom2d etc.

Then we style the download button:

div.modebar a[data-attr=download] svg.icon path {
	fill: none;
	stroke: #000;
}