plotly / plotly/plotly.R

Custom modeBarButton - icon renders fine everywhere...except the plotly modeBar

Open
#2,266 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
R
Stars
2.7k
Forks
641
PR merge metrics
No merged PRs in 30d

Description

I want to replace the Download image icon in the modeBar - seems like a simple enough task?
It's been a real struggle though.
I have this icon:
echart-download-small

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-8.717 -10 17.435 20" width="17.435" height="20"><path stroke="#666" fill="none" d="m-4.048-.989 3.992 3.667L4.065-.908M-4.064 2.37v2.336h7.982V2.369m-3.992.244v-7.319" stroke-width="1.176"/></svg>

I'd like to use it as the Download image icon, based on a bunch of research on SO, Plotly issues and posit community forums I've come up with the following code for doing so:

dl_button <- list(
  name = "Save As Image",
  icon = list(
    width = 17.435,
    height = 20,
    path = "m-4.048-.989 3.992 3.667L4.065-.908M-4.064 2.37v2.336h7.982V2.369m-3.992.244v-7.319"
  ),
  click = htmlwidgets::JS("
                        function(e) {
                          Plotly.downloadImage(e.id, {format: 'png', width: 800, height: 600, filename: e.id});
                        }

                            ")
)

plotly::plot_ly(mtcars, x = ~cyl) |>
  plotly::config(
    displaylogo = FALSE,
    modeBarButtonsToAdd = list(dl_button),
    modeBarButtonsToRemove = c(
      "zoomIn2d",
      "zoom2d",
      "pan2d",
      "zoomOut2d",
      "select2d",
      "lasso2d",
      "autoScale2d",
      "resetScale2d",
      "hoverClosestCartesian",
      "hoverCompareCartesian",
      "toImage"
    )
  ) |>
  htmlwidgets::onRender('function(el, x) {
                         $("[data-title=\'Save As Image\'] svg path").attr("fill", "none").attr("stroke-width", "1.176");
                         $("[data-title=\'Save As Image\'] svg").attr("viewBox","-8.717 -10 17.435 20").attr("width", "17.435px").attr("height", "20px");
                        }')

Note that the HTML/svg for the icon in the rendered plot is identical to what's above, yet...
image

Any ideas as to why?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the R example using plotly::config() with modeBarButtonsToAdd and htmlwidgets::onRender(), then inspect the rendered modeBar SVG in a browser. Reproduce the mismatch between the identical SVG markup and the displayed icon; done when the cause is identified and the custom Download image icon renders as intended.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, r
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.