Area Chart Tooltip

[AVK]

I want to customise the area map tooltip to have "country name: value" can this be achieved

[stevediaz · Accepted solution]

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.

[hsteed]

Not sure if you have seen binextlevel - but there are a lot of solutions posted.
https://www.binextlevel.com/post/add-additional-information-to-tooltip-area-map