Area Chart Tooltip
I want to customise the area map tooltip to have "country name: value" can this be achieved
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.
