Search code examples
rgraphhighchartsmarginr-highcharter

R Highcharter margins go weird depending on y-max

I get a huge margin on right side when I make my y-max anything greater than 500, but it looks fine when the ymax is under 500.

See MWE below:

library(highcharter)
library(data.table)

tmp.df.agg <- data.table(ContractName_interval = factor(c("Republican1",
                                                          "Republican2",
                                                          "Republican3",
                                                          "No Market1",
                                                          "Democratic3",
                                                          "Democratic2",
                                                          "Democratic1")),
                         votes = c(15,73,38,337,9,56,10),
                         color = c("#9f0000",
                                   "#cf0000",
                                   "#f9adad",
                                   "#d3d3d3",
                                   "#b5cacf",
                                   "#81b5c0",
                                   "#578b96"))

p <- highchart() %>%
  hc_add_series(type = "bar",
                data = tmp.df.agg,
                hcaes(y = votes, group = ContractName_interval),
                dataLabels = list(
                  enabled = TRUE,
                  style = list(textOutline = FALSE, fontSize = 20)
                )) %>%
  hc_colors(tmp.df.agg$color) %>%
  hc_xAxis(visible = FALSE, min = -1, max = 1) %>%
  hc_legend(enabled = FALSE) %>%
  hc_plotOptions(series=list(stacking='normal')) %>%
  hc_chart(backgroundColor = "transparent")


p %>%
  hc_yAxis(visible = FALSE, min = 1, max = 501)
p %>%
  hc_yAxis(visible = FALSE, min = 1, max = 500)

The right margin is also too big when I don't use axis limits at all.

Solution

  • This is because Highcharts sets axis.max to the last tick which is rounded to the "whole" (like tens or hundreds, etc) number. If you make your yAxis visible, you will see that the last tick is either 500 or 550 (so the ticks are nicely aligned). It makes sense. When a tick is set to 550, then an empty space is created (you called it margin).

    To prevent that, you can either define yAxis.tickPositions rigidly or set yAxis.endOnTick to false. For safety, you can also set yAxis.maxPadding to 0.

    API References: https://api.highcharts.com/highcharts/yAxis.tickPositions https://api.highcharts.com/highcharts/yAxis.endOnTick https://api.highcharts.com/highcharts/yAxis.maxPadding

    If you want to hide your yAxis anyway, the best solution is to set endOnTick to false:

    p %>%
  hc_yAxis(visible = TRUE, min = 1, max = 501, endOnTick = FALSE, maxPadding = 0)

    Let me know if you have any further questions.