CODEWITHSUNDEEP
rplotly
Timothy Shen
Timothy Shen

Reputation: 73

R Plotly: How to change the color of the outer border?

I am creating a plot with .html format. The plot has a black background and I am wondering how to change the white border to black?

I notice that if I define the dimension of the plot (autoscale is set to FALSE), there are a lot of white space outside.

Thank you very much.

Sorry for not posting an example, this is my first time posting.

Here is one simple example:

labels = paste((data/sum(data))*100,"%")

values = c(53, 43, 77, 33)

p1 = plot_ly(labels=labels,
             values=values,
             type="pie",
             hoverinfo = "label+percent",
             showlegend = FALSE,
             sort = FALSE
)

p1 = layout(p1,
            paper_bgcolor="rgb(31,31,31)",
            plot_bgcolor="rgb(31,31,31)",
            legend = list(font = list(color = "white"),
                          bgcolor = "transparent"),
            autosize = T,
            xaxis = list(
              color = "transparent"
            ),
            yaxis = list(
              color = "transparent"
            )
)

p1

Plotly Pie Chart Plotly Pie Chart

This is a screenshot of the plot. As you can see there is a thin white border around the plot.

Upvotes: 3

Views: 5147

Answers (3)

Carson
Carson

Reputation: 2757

Sounds like you want a different default in the htmlwidget sizing policy. Try something like this:

p1$sizingPolicy$padding <- 0

Upvotes: 2

Batanichek
Batanichek

Reputation: 7871

In addition to @Nikolay `s answer

If your want do change some styles in plotly you can convert it to htmlwidget and then use like:

library(plotly)
values = c(53, 43, 77, 33)
labels = paste((values/sum(values))*100,"%")


p1 = plot_ly(labels=labels,
             values=values,
             type="pie",
             hoverinfo = "label+percent",
             showlegend = FALSE,
             sort = FALSE
)
style(p1,'#htmlwidget_container{
          position: absolute; 
      top: 0px; right: 0px; bottom: 0px; left: 0px;
      }')

p1 = layout(p1,
            paper_bgcolor="rgb(31,31,31)",
            plot_bgcolor="rgb(31,31,31)",
            legend = list(font = list(color = "white"),
                          bgcolor = "transparent"),
            autosize = T,
            xaxis = list(
              color = "transparent"
            ),
            yaxis = list(
              color = "transparent"
            )

)

library(htmltools)
library(htmlwidgets)

p2=as.widget(p1)
appendContent(p2,tags$head(tags$style('
          #htmlwidget_container{
            position: absolute  !important;
            top: 0px  !important; 
            right: 0px  !important;
            bottom: 0px  !important;
            left: 0px  !important;
                                  }')))

Upvotes: 1

Nikolai
Nikolai

Reputation: 489

I assume that this is a bug in plotly. When I inspect the created html it shows the following:

<body style="margin: 5px; padding: 0px; overflow: hidden; width: 100%; height: 100%; background-color: white;">
<div id="htmlwidget_container" style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px;">
<div id="htmlwidget-3128" class="plotly html-widget html-widget-static-bound js-plotly-plot" style="width: 100%; height: 100%;">

<div class="plot-container plotly"><div class="svg-container" style="position: relative; width: 1270px; height: 403px;">

[...]

That means, the actual plotly container is embedded in a widget container with 5px.

Now if you want only to beautify your one html, change the beginning tags to the following:

<body style="margin: 0px; padding: 0px; overflow: hidden; width: 100%; height: 100%; background-color: white;">
<div id="htmlwidget_container" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;">

If you want everybody to profit, report this additionally as a bug over at plotlys project page.

Upvotes: 1

Related Questions