I need to add a icon to the modeBarButtons list… Im using following code.
modeBarButtons :[
[{
name: “test”,
icon: Plotly.Icons.disk,
click: function() {
}
}],
[‘toImage’],
[‘zoom2d’],…
I need to change the icon… how can i specify my own image.? or do you have a list of icons availble?
thanks.
I need an icon matching to “import…” because im adding a feature saying import data from a file…
Cant we give a icon of ours?
@mmek123 adding your own icon should do doable.
All you need is an object with attributes path (the svg path), width (in pixels) and ascent and descent (which represent the offset) as in the list here.
To get custom, there are plenty of options e.g https://fortawesome.github.io/Font-Awesome/
I can’t seem how to get my icon to display. I am working with the following icon, from Google Material Design:
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/> </svg>
I set width to 24, path to M7 14... but can’t seem to figure out ascent and descent. It seems to be incorrectly offset because by playing around with the generated elements using my browsers Developer Tools does get it to display. But only if I manually increase the width and height of the parent svg element to 10em.
What am I missing?
This gist goes into a little more detail.
I’d recommend taking a look at it first. Please write back if you have any questions.
Hi, Having similar kind of issue. Couldn’t get icon displayed in the modebar though if I use path of any icon from plotly list of icons it gets displayed. The path of svg I want to display is
d=“M14.38,3.467l0.232-0.633c0.086-0.226-0.031-0.477-0.264-0.559c-0.229-0.081-0.48,0.033-0.562,0.262l-0.234,0.631C10.695,2.38,7.648,3.89,6.616,6.689l-1.447,3.93l-2.664,1.227c-0.354,0.166-0.337,0.672,0.035,0.805l4.811,1.729c-0.19,1.119,0.445,2.25,1.561,2.65c1.119,0.402,2.341-0.059,2.923-1.039l4.811,1.73c0,0.002,0.002,0.002,0.002,0.002c0.23,0.082,0.484-0.033,0.568-0.262c0.049-0.129,0.029-0.266-0.041-0.377l-1.219-2.586l1.447-3.932C18.435,7.768,17.085,4.676,14.38,3.467 M9.215,16.211c-0.658-0.234-1.054-0.869-1.014-1.523l2.784,0.998C10.588,16.215,9.871,16.447,9.215,16.211 M16.573,10.27l-1.51,4.1c-0.041,0.107-0.037,0.227,0.012,0.33l0.871,1.844l-4.184-1.506l-3.734-1.342l-4.185-1.504l1.864-0.857c0.104-0.049,0.188-0.139,0.229-0.248l1.51-4.098c0.916-2.487,3.708-3.773,6.222-2.868C16.187,5.024,17.489,7.783,16.573,10.27”
Something that you must be sure to do, is set the width, ascent and descent. Those values will define the size of the SVG viewBox (where the height will be ascent - descent)
E.g. for the last example in this thread, this should work:
{
'width': 20,
'ascent': 20,
'descent': 0,
'path': 'M14.38,3.467l0.232-0.633c0.086-0.226-0.031-0.477-0.264-0.559c-0.229-0.081-0.48,0.033-0.562,0.262l-0.234,0.631C10.695,2.38,7.648,3.89,6.616,6.689l-1.447,3.93l-2.664,1.227c-0.354,0.166-0.337,0.672,0.035,0.805l4.811,1.729c-0.19,1.119,0.445,2.25,1.561,2.65c1.119,0.402,2.341-0.059,2.923-1.039l4.811,1.73c0,0.002,0.002,0.002,0.002,0.002c0.23,0.082,0.484-0.033,0.568-0.262c0.049-0.129,0.029-0.266-0.041-0.377l-1.219-2.586l1.447-3.932C18.435,7.768,17.085,4.676,14.38,3.467 M9.215,16.211c-0.658-0.234-1.054-0.869-1.014-1.523l2.784,0.998C10.588,16.215,9.871,16.447,9.215,16.211 M16.573,10.27l-1.51,4.1c-0.041,0.107-0.037,0.227,0.012,0.33l0.871,1.844l-4.184-1.506l-3.734-1.342l-4.185-1.504l1.864-0.857c0.104-0.049,0.188-0.139,0.229-0.248l1.51-4.098c0.916-2.487,3.708-3.773,6.222-2.868C16.187,5.024,17.489,7.783,16.573,10.27',
},
However, the images are upside down! For some reason, this transformation matrix is applied in https://github.com/plotly/plotly.js/blob/v1.22.0/src/components/modebar/modebar.js#L176:
matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')'
The -1 in there is flipping the image, which means any custom SVG we provide will show upside down. Which is a pain. Maybe this could be configurable?
I want to use a custom modeBarButton too and choosed the download icon from fontawesome: http://fontawesome.io/icon/download/
I found the underlying svg here: https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/download.svg
So I tried your example @etienne with that:
var icon = {
'width': 1792,
'path': 'M1344 1344q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm256 0q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm128-224v320q0 40-28 68t-68 28h-1472q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h465l135 136q58 56 136 56t136-56l136-136h464q40 0 68 28t28 68zm-325-569q17 41-14 70l-448 448q-18 19-45 19t-45-19l-448-448q-31-29-14-70 17-39 59-39h256v-448q0-26 19-45t45-19h256q26 0 45 19t19 45v448h256q42 0 59 39z',
'ascent': 1792,
'descent': 0,
};
I hope the choosed value for ascent, descent and width is correct - I was unsure.
But my problem is that the icon is flipped 180 degree. How I can avoid this?
How I can avoid this?
Wait or submit a PR for Custom mode bar buttons are displayed upside down · Issue #1335 · plotly/plotly.js · GitHub
or flip the icon yourself in any image processing software.
Ok. For the first solution I use the upload-icon which looks like a download-button if it is flipped:) The hint to the github issue is good, thank you
How do make the custom button on and off. Like when when zoom is on the magnifying glass is darker and when off its lighter. How do I do that with the custom buttom
Some icons have more complex <path> structures, can these be used in Plotly? Or only icons with a singles <path>?
I think any paths can be joined together, for example in Inkscape (open source svg editor), with “combine”). This may mean they all must be the same colour? Somewhere along the line all colours are defaulted to gray. Control over the colour would be nice.
Also, control over the shape (e.g. rectangle viewbox for wider logos).
Bonjour Etienne!
It seems that the link doesn’t work anymore! Is there an updated link for icons list?
Merci
Just as @Behrooz I just saw, that build/ploticon.js is no longer existing. Was it moved?
Edit - found it:
Here it is.
Also relevant: