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:

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 https://github.com/jbkunst/highcharter/issues/39#issuecomment-182552480.

Rich Majerus richmajerus.com

[jbkunst]

I guess you can code this functionality ;)!

I'm closing the issue.