I am trying out the highcharter package in R. I am trying to add a tooltip. The default (first example) gives me a marker and the series name.
<code>hc_tooltip(
shared = TRUE,
split = FALSE,
valueDecimals = 2)
</code>
<code>hc_tooltip(
shared = TRUE,
split = FALSE,
valueDecimals = 2)
</code>
hc_tooltip(
shared = TRUE,
split = FALSE,
valueDecimals = 2)
But when I try to to add text color to the tooltip to match the series color I lose the markers. My attempt below only yields the marker name but not the marker. Does anyone have a solution that works around my attempt?
<code>hc<-hc %>% hc_tooltip(
shared = TRUE,
split = FALSE,
valueDecimals = 2,
symbol = "circle",
formatter = JS(
"function () {
var tooltip = '<b>' + Highcharts.dateFormat('%Y-%m-%d', this.x) + '</b><br/>';
$.each(this.points, function (i, point) {
var color = point.series.color;
var marker = point.series.symbol; // Get the marker symbol
tooltip += '<span style="color:' + color + ';"><b>' + marker + '</b>: '+ point.series.name + '</b>: ' + point.y.toFixed(2) + '</span><br/>';
});
return tooltip;
}"
)
)
</code>
<code>hc<-hc %>% hc_tooltip(
shared = TRUE,
split = FALSE,
valueDecimals = 2,
symbol = "circle",
formatter = JS(
"function () {
var tooltip = '<b>' + Highcharts.dateFormat('%Y-%m-%d', this.x) + '</b><br/>';
$.each(this.points, function (i, point) {
var color = point.series.color;
var marker = point.series.symbol; // Get the marker symbol
tooltip += '<span style="color:' + color + ';"><b>' + marker + '</b>: '+ point.series.name + '</b>: ' + point.y.toFixed(2) + '</span><br/>';
});
return tooltip;
}"
)
)
</code>
hc<-hc %>% hc_tooltip(
shared = TRUE,
split = FALSE,
valueDecimals = 2,
symbol = "circle",
formatter = JS(
"function () {
var tooltip = '<b>' + Highcharts.dateFormat('%Y-%m-%d', this.x) + '</b><br/>';
$.each(this.points, function (i, point) {
var color = point.series.color;
var marker = point.series.symbol; // Get the marker symbol
tooltip += '<span style="color:' + color + ';"><b>' + marker + '</b>: '+ point.series.name + '</b>: ' + point.y.toFixed(2) + '</span><br/>';
});
return tooltip;
}"
)
)