Nested Animated Doughnut Data Visualization

This component is a Nested Animated Doughnut Data Visualization built with the amCharts 4 framework. It renders two concentric data series within a single circular coordinate system. Its function is to provide a high-density comparison of related metrics, utilizing a central dynamic label to summarize the aggregate total.

Specs

• Weight: ~380 KB (Dependencies: amCharts Core + Charts + Animated theme).
• Performance: Optimized for SVG rendering; handles complex animation frames smoothly via the internal engine.
• Theming / Customization: High. Uses an HSL stepping algorithm to derive segment colors from a single base color.
• Responsiveness: Fluid. Inherits dimensions from the parent #chartdiv container.
• Graceful Degradation: Fails to an empty container if the amCharts scripts or Canvas/SVG support are absent.

Anatomy

The visualization is a balance of structured data and declarative styling.

• HTML (The Skeleton): A singular div#chartdiv acting as the render target for the library.
• CSS (The Skin): Minimalist. Defines font families and container height to ensure proper aspect ratio rendering.
• JS (The Nervous System): The amCharts engine. It instantiates a PieChart, defines an offset start/end angle (160 to 380 degrees), and maps the JSON data objects to specific PieSeries fields.

Logic

The intelligence of this snippet lies in the automatic summation of data via the adapter pattern.

label.adapter.add("text", function(text, target){
	return "[font-size:18px]total[/]:\n[bold font-size:30px]" + pieSeries.dataItem.values.value.sum + "[/]";
})

Instead of manually calculating the total using a JS reduce function, the code hooks into the library’s internal dataItem calculation. The adapter dynamically listens for data changes and updates the central label with the calculated sum, formatting it using amCharts’ proprietary in-line text styling syntax.

Feel

Professional and precise. The “Animated” theme ensures that segments sweep into view with a calibrated ease. The interaction is informative: hovering over the outer ring reveals a subtle shiftRadius effect, while the inner ring remains stable, providing a grounded reference point for the multi-series data.