In a Highcharter Gantt chart, how do I place two nodes on the same line?

Question

On the HighCharts website there is an example of a Gantt Chart that is created with the "Highcharts Gantt" extension of the suite. This is the chart I am referring to:

source: https://www.highcharts.com/demo/gantt/resource-management

I am struggling to recreate this chart with the highcharter package for R. To understand the dynamics, I have created a simpler example, but it doesn't help me to get the two 'Nissan Leaf' nodes on one 'row' in the chart.

This is what I have tried:

data <- tibble(
  start = today(), 
  end = (today()+1), 
  duration = 1,
  completed = 0.95, 
  name = "Nissan Leaf", 
  id = 1
) %>% 
  add_row(
    start = (today()-2), 
    end = (today()+2.2),
    duration = 4.2,
    completed = 0.8, 
    name = "Tesla", 
    id = 2 
  ) %>% 
  add_row(
    start = (today()+1.5),
    end = (today()+2.2),
    duration = 0.7,
    completed = 0, 
    name = "Nissan Leaf", 
    id = 1 
  ) %>% 
  mutate_if(data, is.Date, datetime_to_timestamp) %>% 
  group_by(name) %>%
  arrange(start)


highchart(type = "gantt") %>% 
  hc_add_series(
    name = "Program",
    data = data,
    grouping = list(
      groupPadding = 0.2,
      pointPadding = 0.1,
      borderWidth = 0,
      shadow = FALSE
    )
  )

The result is:

I hope that somebody will be able to help me understand how I can group various items on one line (the Nissan Leaf) line.

Answer 1

You are looking for the yAxis.uniqueNames option. I hope the following JS example helps you implement it in R.

JS example:

Highcharts.ganttChart('container', {
  yAxis: {
    uniqueNames: true
  },

  series: [{
    data: [{
      name: 'Main',
      pointWidth: 0
    }, {
      name: 'First',
      start: 1560902400000,
      end: 1561075200000,
    }, {
      name: 'Second',
      start: 1560902400000,
      end: 1561075200000
    }, {
      name: 'Second',
      start: 1561507200000,
      end: 1561680000000
    }]
  }]
});

Demo: https://jsfiddle.net/BlackLabel/2yoz3jw9/

API Reference: https://api.highcharts.com/gantt/yAxis.uniqueNames

---

With the hint above, I have modified my example and it provides the desired output.

highchart(
  type = "gantt"
) %>% 
  hc_add_series(
    name = "Program",
    data = data,
    grouping = list(
      groupPadding = 0.2,
      pointPadding = 0.1,
      borderWidth = 0,
      shadow = FALSE
    )
  ) %>% 
  hc_yAxis(
    uniqueNames = TRUE
  )

This is the result: