Columns not stacking up with HighCharterR in the tooltip

Question

I am trying to display a stacked Column Chart on tooltip (using HighCharter api in R). I was able to get a column chart displayed as the tooltip but the bars are not stacking up. Here is the code that I am trying :

donutBase2=
donutBase %>% 
  select(nameTeam,primary_color,Type, Value, Category) %>% 
  nest(data=c(-nameTeam,-primary_color)) %>% 
  mutate(
    data = map(data, mutate_mapping, hcaes(y = Value, x = Category, group = Type), drop = TRUE) ,
    data =  map(data, list_parse2)
  ) %>%
  rename(ttdata = data)  %>% 
  mutate(segment = 1)

hchart(
  donutBase2,
  "pie",
  hcaes(name = nameTeam, y = segment, color = primary_color),
  innerSize = 500
) %>%
  hc_tooltip(
    useHTML = TRUE,
    headerFormat = "<b>{point.key}</b>",
    pointFormatter = tooltip_chart(
      accesor = "ttdata",
      hc_opts = list(
        chart = list(type = "column"),
        yAxis = list(title = list(text = "FG3M")),
        xAxis = list( title = list(text = "Game #")),
        plotOptions = list(area = list(fillOpacity = 0.2),series=list(stacking="percent"))
       ),
      height = 225,
      width = 375
      )
   ) 

[Output of the above code][1]

Here is the inspiration for the above code: [HighcharterR api][2]

I am not very familiar with the correct Javascript option, would anyone help me as to how to convert the bars to stacked mode ? [1]: https://i.stack.imgur.com/OzHCE.png [2]: https://jkunst.com/blog/posts/2019-02-04-using-tooltips-in-unexpected-ways/

Answer 1

Here you have a configuration of how to set a column series with stacked property inside the tooltip.

Live demo: https://jsfiddle.net/BlackLabel/7ybztdsw/

function renderChart(point) {
  Highcharts.chart('hc-tooltip', {
    chart: {
      type: 'column'
    },
    title: {
      text: 'Stacked column chart'
    },
    xAxis: {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    plotOptions: {
      column: {
        stacking: 'normal',
        dataLabels: {
          enabled: true
        }
      }
    },
    series: [{
        data: point.options.eData,
        dataLabels: {
          enabled: false
        }
      },
      {
        data: point.options.eData,
        dataLabels: {
          enabled: false
        }
      }, {
        data: point.options.eData,
        dataLabels: {
          enabled: false
        }
      }
    ]
  });
}

Highcharts.addEvent(
  Highcharts.Tooltip,
  'refresh',
  function() {
    renderChart(this.chart.hoverPoint);
  }
);

Highcharts.chart('container', {
  title: {
    text: 'Chart inside tooltip demo'
  },
  tooltip: {
    useHTML: true,
    headerFormat: '',
    pointFormat: '<div id="hc-tooltip"></div>'
  },
  series: [{
    type: 'line',
    data: [{
      y: 10,
      eData: [1, 2, 3, 4, 5]
    }, {
      y: 5,
      eData: [-10, 20, 50, 70, 20]
    }, {
      y: 2,
      eData: [103, 11, 12, 54, 68]
    }]
  }]
});