question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom mode bar buttons are displayed upside down

See original GitHub issue

The 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:closed
  • Created 7 years ago
  • Comments:7 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
rreussercommented, Jan 30, 2017

Perhaps flipy is preferable both since it’s more fully descriptive and since flipx could conceivably be useful too (left right arrows without needing two separate svg assets?)

0reactions
etpinardcommented, Jul 5, 2018
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found