Adjusting Margins Triggers Appearance of Download Menu

[majerus]

Thanks for all your work on this. I am new to testing out this widget and am impressed. I am trying to adjust the padding around a highchart when it is saved with saveWidget (see http://jsfiddle.net/gRYGn/4/). However, I don't seem to be able to adjust the padding and when I try to it triggers the appearance of the download menu in the upper right corner.

Example code below

mtcars %>%
group_by(cyl) %>%
summarise(ave_mpg = mean(mpg)) -> tmp

highchart(theme = hc_theme_chalk(),
hc_opts = list(marginRight = '200px')) %>% # triggers appearance of download menu and does not adjust margins
hc_title(text = "Example", style = list(color = "#F3F2F2")) %>%
hc_subtitle(text = paste("Example Date", Sys.Date()-1),
style = list(color = "#F3F2F2", fontWeight = "bold")) %>%
hc_xAxis(categories = tmp$cyl) %>%
hc_add_series(name = "mpg", type = "column", color = "#002878", showInLegend = FALSE,
dataLabels = list(align = "center", enabled = TRUE, format = "", color = "#F3F2F2"),
data = tmp$ave_mpg) %>%
hc_tooltip(crosshairs = TRUE, shared = TRUE, valueSuffix = "") %>%
hc_yAxis(title = "mpg", minorGridLineWidth = 0, gridLineWidth = 0, labels = list(format = ""), max = max(tmp$ave_mpg)
)

[jbkunst]

Hi @majerus! Thanks for try/test the package.

First of all. In the future, can you style/format the code? It's easy, just ``` at the begginig and at the end. So it's easy for who read your code.

Ok. You can specify the margins with hc_chart and enabled the exporting with hc_exporting (by default is false).

Can you try this code and tell me if it help you?

mtcars %>%
  group_by(cyl) %>%
  summarise(ave_mpg = mean(mpg)) -> tmp

hc <- highchart() %>% 
  hc_add_theme(hc_theme_chalk()) %>% 
  hc_chart(margin = c(50, 100, 150, 200)) %>% 
  hc_title(text = "Example", style = list(color = "#F3F2F2")) %>% 
  hc_subtitle(text = paste("Example Date", Sys.Date()-1),
              style = list(color = "#F3F2F2", fontWeight = "bold")) %>% 
  hc_xAxis(categories = tmp$cyl) %>% 
  hc_add_series(name = "mpg", type = "column", color = "#002878", showInLegend = FALSE, 
                dataLabels = list(align = "center", enabled = TRUE, format = "", color = "#F3F2F2"),
                data = tmp$ave_mpg) %>% 
  hc_tooltip(crosshairs = TRUE, shared = TRUE, valueSuffix = "") %>% 
  hc_yAxis(title = "mpg", minorGridLineWidth = 0, gridLineWidth = 0, labels = list(format = ""), max = max(tmp$ave_mpg))

# without Download Menu
hc

# with Download Menu
hc %>% hc_exporting(enabled = TRUE)

[majerus]

Thank you and sorry for forgetting to format the code.

This is close to what I am hoping to figure out. Is it possible to remove the padding around the graph as well? In the link I shared there is no white-space padding around the graph. Is that possible in the R implementation?

Thanks for the quick response. Again, this is impressive work.

Rich

[jbkunst]

Do you ask who to remove the padding when you use saveWidget, right?. htmlwidget have a template which add some padding to the resulting html. When you have your html you can edit and add other script tag after all the script tags and add:

<script>
$(document).ready(function () {
    $("div").css("top", 0).css("left", 0).css("right", 0).css("bottom", 0)
});
</script>

This will remove all the padding for all the divs and will be no more white space ;)!

Before:

After:

I hope this is what you need XD.

[majerus]

Thanks. I was able to tweak the html manually to accomplish this. I am
hoping to find a way to do this within the r-script because the actual
script sends a query, runs an analysis and produces this a graph daily.

Rich

On Wed, Feb 10, 2016 at 2:56 PM, Joshua Kunst notifications@github.com
wrote:

Do you ask who to remove the padding when you use saveWidget, right?.
htmlwidget have a template which add some padding to the resulting html.
When you have your html you can edit and add other script tag after all the
script tags and add:

<script> $(document).ready(function () { $("div").css("top", 0).css("left", 0).css("right", 0).css("bottom", 0) }); </script>

This will remove all the padding for all the divs and will be no more
white space ;)!

Before:

[image: image]
https://cloud.githubusercontent.com/assets/56481/12959825/068571ac-d017-11e5-835e-68b1cb37f264.png

After:

[image: image]
https://cloud.githubusercontent.com/assets/56481/12959839/14ddd974-d017-11e5-9465-d2a244069f42.png

I hope this is what you need XD.

—
Reply to this email directly or view it on GitHub
#39 (comment).

Rich Majerus
richmajerus.com

[jbkunst]

I guess you can code this functionality ;)!

I'm closing the issue.