Custom mode bar buttons are displayed upside down
See original GitHub issueThe mode bar icons that ship with plotly are for some reason flipped vertically. To compensate, plotly applies transformation matrix that includes a vertical flip (the -1 in the following line):
path.setAttribute('transform', 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')');
To illustrate: the following example of how to add a custom icon uses a SVG path that looks good, because it is actually an upside down image (I render the SVG inline for comparison): http://codepen.io/bruno-rino/pen/bgowQx
The -1
in the transformation matrix should be configurable. Or else any normal SVG path has to be flipped manually (and I don’t know even how to go about doing that) before it can be used as an icon in the mode bar.
Issue Analytics
- State:
- Created 7 years ago
- Comments:7 (6 by maintainers)
Top Results From Across the Web
custom mode bar buttons are displayed upside down - CodePen
add mode bar button with custom icon. {"__browser":{"device":"unknown","mobile":true,"name":"chrome","platform":"android","version":"106"},"__constants":{} ...
Read more >26 Control the modebar
By default, the modebar appears in the top right-hand side of a plotly graph on mouse hover, ... Supplying a custom modebar button...
Read more >How to custom or display modebar in plotly? - Stack Overflow
Save this question. Show activity on this post. I would like to custom the modebar (on top right) so as to keep just...
Read more >Adding a button to "modeBarButtons" with cutom image - plotly.js
The -1 in there is flipping the image, which means any custom SVG we provide will show upside down. Which is a pain....
Read more >How to Fix an Upside Down Screen on Windows 10 - YouTube
Select Start / Settings / System / Display, and choose a screen orientation from the drop- down list labelled Orientation or inverted screen....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Perhaps
flipy
is preferable both since it’s more fully descriptive and sinceflipx
could conceivably be useful too (left right arrows without needing two separate svg assets?)Resolved by @vdh 's https://github.com/plotly/plotly.js/pull/2762