CODEWITHSUNDEEP
amcharts
Rahul.kmar
Rahul.kmar

Reputation: 89

Tooltip issue in amchart v4 , not reload on pie chart slice

series.slices.template.events.on("over", function(ev) {
    series.slices.template.tooltipHTML=showHtml(ev, series.name);
}, this);

Tooltip issue in amchart4: not reload on pie chart slice.

I am using custom tooltip like generating custom html on mouse hover. Everything is working but when I move cursor from one slice to another, the popup html is not refreshing. When I mouse out and then again mouse over the same slice, the popup html shows correct data.

I think the previous html data is cached somewhere. Please help me.

Upvotes: 0

Views: 726

Answers (1)

notacouch
notacouch

Reputation: 3655

It could possibly help to see what showHtml is doing. But we'll make do without that.

There are a few problems with this code.

Code-wise, the most obvious is this line:

series.slices.template.tooltipHTML=showHtml(ev, series.name);

You're resetting the template's tooltipHTML instead of the actual slice's tooltipHTML.The template has applyOnClones as true by default so it will propagate to all the other slices, so if this worked it was by accident. If there's any slice-specific settings in showHtml that don't rely on data placeholders this will break tooltipHTML for the next slice that's hovered over.

The real issue, however, is the approach.

So long as tooltipHTML or tooltipText are set, a tooltip will appear on hover.

It's better to use an adapter for tooltipHTML in this case.

As a quick test to see which wins the race condition, the hover event or the tooltipText/HTML adapter, make a handler for each, and hover over a slice:

series.slices.template.events.on("over", function(){
  console.log("hover");
});

// override tooltipText so tooltipHTML is actually used
series.slices.template.tooltipHTML = "something...";
series.slices.template.adapter.add("tooltipHTML", function(tooltipHTML) {
  console.log("adapter");
  return tooltipHTML;
});

// console:
// "adapter"
// "hover"

You'll find that the adapter triggers first, so by the time you hover, the tooltip is already on its way with its HTML and all.

So use an adapter, just be sure to adjust your showHtml function so its first argument takes target itself instead of event (it may not be necessary to have another argument with the tooltipHTML that's being modified because it will always be sent the original tooltipHTML unformatted string, so that could be referred to manually whether as a string or variable).

The adapter can look like this:

var originalTooltipHTML = "<strong>{country}: </strong>"
series.slices.template.tooltipHTML = originalTooltipHTML;
series.slices.template.adapter.add("tooltipHTML", function(tooltipHTML, target) {
  // #2: If we had used an event, here you would work on the target itself, event.target, not the template.
  // The showHtml might not even be needed, perhaps whatever it does can go in here instead.
  return showHtml(target);
});

Here's a demo with all that thrown together:

https://codepen.io/team/amcharts/pen/a0122e572d27cf513a78384345cad3a6

Upvotes: 1

Related Questions