How to Create Custom Shapes in R Highcharter

Question

I am fairly new to highcharts in R, and I am trying to create a similar bullet chart to this example: http://jsfiddle.net/jlbriggs/LdHYt/ . The problem I am running into is creating this function in R:

Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) {
return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
};

and I'm unsure of where to add this into the code.

I've tried including this code in the hc_plotOptions symbol section, but I haven't had any luck.

Here is the code I tried:

    library(dplyr)
    library(highcharter)

    actual <- c(5,10,3,15)
    target <- c(6,7,5,12)
    date <- as.Date(c('2012-02-01','2012-03-01','2012-04-01','2012-05-01'))
    data <- data.frame(actual,target,date)

    highchart(type = "stock") %>% 
      hc_add_series_list(
        data %>% 
          group_by(
            name = "actual",
            type = "column",
            yAxis = 0
          ) %>% 
          do( data = list_parse(data.frame(x = datetime_to_timestamp(.$date), y = .$actual)))
      ) %>% 
      hc_add_series_list(
        data %>% 
          group_by(
            name = "target",
            type = "scatter",
            yAxis = 0
          ) %>% 
          do( data = list_parse(data.frame(x = datetime_to_timestamp(.$date), y = .$target)))
      ) %>% 
      hc_plotOptions(
        scatter = list(
          marker = list(
            # This is where I am inserting the Java Script code from the example
            symbol = JS("function(x, y, width, height) {
                  return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
                  };"),
            # 
            lineWidth = 3,
            radius = 8,
            lineColor = "#000"
          )
        )
      )

When I put this code in my graph goes blank, and nothing is displayed. Thank you for looking at this.

Answer 1

R environment doesn't allow to simply wrap Highcharts core functions (at least I don't know a perfect way). The way I do this: I use chart.events.load event to inject JS code (you can't do it in plotOptions marker symbol like you did). The problem is that load event fires after the chart is created. So all we need to do is update our markers again after the chart is created so they will be rendered again, but this time using a changed core code.

This is the key part:

hc_chart(
    events = list(
      load = JS("function(){
                Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) {
                  return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
                };
                this.series[1].update({marker: {symbol: 'line'}})
      }")
    )
  ) %>% 

And the whole code:

library(dplyr)
library(highcharter)

actual <- c(5,10,3,15)
target <- c(6,7,5,12)
date <- as.Date(c('2012-02-01','2012-03-01','2012-04-01','2012-05-01'))
data <- data.frame(actual,target,date)

highchart(type = "stock") %>% 
  hc_add_series_list(
    data %>% 
      group_by(
        name = "actual",
        type = "column",
        yAxis = 0
      ) %>% 
      do( data = list_parse(data.frame(x = datetime_to_timestamp(.$date), y = .$actual)))
  ) %>% 
  hc_add_series_list(
    data %>% 
      group_by(
        name = "target",
        type = "scatter",
        yAxis = 0
      ) %>% 
      do( data = list_parse(data.frame(x = datetime_to_timestamp(.$date), y = .$target)))
  ) %>% 
  hc_chart(
    events = list(
      load = JS("function(){
                Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) {
                  return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
                };
                this.series[1].update({marker: {symbol: 'line'}})
      }")
    )
  ) %>% 
  hc_plotOptions(
    scatter = list(
      marker = list(
        # This is where I am inserting the Java Script code from the example
        symbol = 'line',
        # 
        lineWidth = 3,
        radius = 8,
        lineColor = "#000"
      )
    )
  )

API Reference: https://api.highcharts.com/highcharts/chart.events.load https://api.highcharts.com/class-reference/Highcharts.Chart#update