Forum Discussion

AVK's avatar
AVK
Data Storage
08-11-2023
Solved

Area Chart Tooltip

I want to customise the area map tooltip to have "country name: value" can this be achieved
  • stevediaz's avatar
    stevediaz
    08-17-2023

    Hello

    Assuming you have data like this:

    var countryData = [ { name: "Country A", value: 123 }, { name: "Country B", value: 456 }, // ... ];

    Customize the tooltip using D3.js:

    var tooltip = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0); d3.selectAll(".country") .on("mouseover", function(d) { var country = d.properties.name; var value = countryData.find(item => item.name === country).value; tooltip.transition().duration(200).style("opacity", .9); tooltip.html(country + ": " + value) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", function(d) { tooltip.transition().duration(500).style("opacity", 0); });

    Please adjust the code as needed to fit your specific scenario and integrate it into your project.