Search code examples
javascriptvue.jsamcharts4world-map

amcharts map : Changing tooltip dynamicly on hit


I'm using amcharts4 and i want to change dynamicly the tooltip value when on hit event; I tried this :

let chart = am4core.create("chartdiv", am4maps.MapChart);
chart.projection = new am4maps.projections.Miller();
let worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
... some code
let worldPolygon = worldSeries.mapPolygons.template;
worldPolygon.tooltipText = '{name}';
worldPolygon.events.on("hit", async function(ev) {
  let destination_actif = await context.$get_destination_actif_by_country_code(code) // api request on hit a country polygon
// condition to check if there is result
  if(!destination_actif.data){
     worldPolygon.tooltipText = 'No result';
  }else{
     worldPolygon.tooltipText = 'With result';
  }
}

After request api on hit, i want to change the tooltip value depend of the result condition, but here, when i console.log the tooltip, the value changed but on hover the polygon the value still the same on "{name}"


Solution

  • So i found what wrong, in my previous code i tried to change the whole tooltip, that it the wrong way; I needed to change just the target tooltip, so i did this:

    worldPolygon.events.on("hit", async function(ev) {
      let destination_actif = await context.$get_destination_actif_by_country_code(code) 
      let target = ev.target
      if(!destination_actif.data){
         target.tooltipText = 'No result';
      }else{
         target.tooltipText = 'With result';
      }