How to customise the highcharts plot in R

Question

I want to use the highcharts js library in R to plot interactively -

library(highcharter)

Data = 
structure(list(date = structure(c(18361, 18362, 18363, 18364, 
18365, 18366, 18367, 18368, 18369, 18370, 18371, 18372, 18373, 
18374, 18375, 18376, 18377, 18378, 18379, 18380), class = "Date"), 
    variable = c("aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa", 
    "aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa", 
    "aaa", "aaa", "aaa", "aaa"), value = c(-12.7015856459843, 
    4932.54512619195, 4337.84840857512, -1571.78718535286, -1475.28222178705, 
    4232.12003534889, 6536.12700338211, 2413.36143649343, 7711.43571028106, 
    5461.46337941179, 665.728647378994, 6007.98203770009, -900.505732433108, 
    12397.2655306638, 15182.2497643643, 4654.17811998194, 1673.36119858179, 
    10611.5994058113, 7510.88576801876, 20669.8626227112)), row.names = c(NA, 
20L), class = "data.frame")


hchart(Data, "line", plotBorderWidth = 0.2, plotBorderColor = '#070707',
          hcaes(x = as.Date(as.Date(date)), y = value)) %>%
        hc_xAxis(title = NULL, reversed = FALSE, gridLineWidth = 1, type = 'datetime') %>%
        hc_yAxis(title = "", gridLineWidth = 0.2, minorGridLineWidth = 0, gridLineColor = '#070707', opposite = TRUE) 

With this, I want to achieve below things -

1. I want total number of grid-lines will always be 10 in both x and y direction
2. I also want to have a border for the plot region

Any pointer will be highly appreciated.

Answer 1

The gridLines are placed where the ticks are so if you want to have 10 gridLines, you need to have 10 ticks. You can set axis.tickAmount to 10, but this option works only with 'linear' axes. Your yAxis is 'linear', but your xAxis is 'datetime'. You need to change it to 'linear'. When you do that, you will lose date labels formatting, so you need to format them on your own. To achieve that, I used xAxis.labels.formatter and Highcharts.dateFormat() method. To inject a JavaScript code, I also used JS("...") function.

To get a plot border, you can use chart.plotBorderWidth property.

If you want to define your tick placement on your own, you can use axis.tickPositions

This is the whole code:

library(highcharter)

Data = 
  structure(list(date = structure(c(18361, 18362, 18363, 18364, 
                                    18365, 18366, 18367, 18368, 18369, 18370, 18371, 18372, 18373, 
                                    18374, 18375, 18376, 18377, 18378, 18379, 18380), class = "Date"), 
                 variable = c("aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa", 
                              "aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa", 
                              "aaa", "aaa", "aaa", "aaa"), value = c(-12.7015856459843, 
                                                                     4932.54512619195, 4337.84840857512, -1571.78718535286, -1475.28222178705, 
                                                                     4232.12003534889, 6536.12700338211, 2413.36143649343, 7711.43571028106, 
                                                                     5461.46337941179, 665.728647378994, 6007.98203770009, -900.505732433108, 
                                                                     12397.2655306638, 15182.2497643643, 4654.17811998194, 1673.36119858179, 
                                                                     10611.5994058113, 7510.88576801876, 20669.8626227112)), row.names = c(NA, 
                                                                                                                                           20L), class = "data.frame")


hchart(Data, "line", plotBorderWidth = 0.2, plotBorderColor = '#070707',
       hcaes(x = as.Date(as.Date(date)), y = value)) %>%
  hc_chart(plotBorderWidth = 2) %>%
  hc_xAxis(title = NULL, reversed = FALSE, gridLineWidth = 1, type = 'linear', tickAmount = 10, labels = list(formatter = JS("function () {
                return Highcharts.dateFormat('%d. %b', this.value);
            }"))) %>%
  hc_yAxis(title = "", gridLineWidth = 0.2, minorGridLineWidth = 0, gridLineColor = '#070707', opposite = TRUE, tickAmount = 10)

And here you can find API Reference for all used options: https://api.highcharts.com/highcharts/xAxis.tickAmount https://api.highcharts.com/highcharts/xAxis.labels.formatter

https://api.highcharts.com/class-reference/Highcharts#.dateFormat https://api.highcharts.com/highcharts/xAxis.type https://api.highcharts.com/highcharts/xAxis.tickPositions https://api.highcharts.com/highcharts/chart.plotBorderWidth