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/
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]
}]
}]
});