{"version":"1.0","type":"rich","title":"Adding a tooltip to d3 angular component","description":"This example demonstrates D3.js tooltips inside Angular components for both bar charts and pie charts, showing the name, value, and percentage share of each data point on mouse hover. The code creates a tooltip div appended to the chart container, then uses D3 event handlers `mousemove` and `mouseout` to position and display the tooltip dynamically. It calculates the percentage share using the total sum from the data source, and updates the tooltip’s HTML content via D3’s `.html()` method. The implementation uses D3 selections with `.on()` event binding and `d3.event.layerX/layerY` for positioning.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-c31d0899e65a13e873c684dbf0d74286?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}