rhighchartsr-highcharterhighcharts-gantt

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


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:

enter image description here 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:

enter image description here

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


Solution

  • 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:

    enter image description here