---
title: "Aero Donut Chart — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Shouvik Biswas · Charts. Interactive Vector Pie Chart"
canonical: "https://framer.elliotli.dev/component/aero-donut-chart"
---

[Home](/)/[Components](/components)/[Charts](/components/category/charts)/Aero Donut Chart

# Aero Donut Chart

Interactive Vector Pie Chart

[View on Framer](https://framer.com/marketplace/components/aero-donut-chart/?via=elliot-li)

![Aero Donut Chart preview image 1](https://framer.elliotli.dev/og/component/aero-donut-chart/c7b406804ff60fda/1600x1200.jpg)

## Summary

Interactive Vector Pie Chart

## Description

The most advanced donut chart on the marketplace, offering highly customizable vector rendering and fluid interactive feedback to create a premium data experience.

## Features

-   Customizable data segment arrays with distinct color and active-shadow states for exact brand alignment.
    
-   Variable ring thickness and gap spacing parameters for complete structural control over the chart’s density.
    
-   Toggleable rounded cap geometry for softening the visual aesthetic of the data arcs.
    
-   Selectable hover or click interaction models for adapting the component to your specific UX requirements.
    
-   Dynamic center labels with full Framer typography integration for clear, at-a-glance context.
    
-   Integrated prefix and suffix value formatting for accurate localized currency or metric display.
    
-   Independent color mapping for the background track and text elements for seamless theme integration.
    
-   Spring-based entrance drawing physics for a fluid page-loading experience.
    
-   Customizable center text flip transitions for smooth, physics-driven data reveals.
    
-   Native keyboard focus handling and ARIA label routing for strict screen-reader accessibility.
    
-   Structured property panels and intuitive labels for executing clear, friction-free design customizations.
    

## How to Use

-   Drag and drop the component onto your Framer canvas.
    
-   Define your data segments by inputting values.
    
-   Publish your project to view your component live.
    

_Turn raw data into a highly polished, interactive experience._

## Rank history [How rankings work →](/terms#rankings)

-   All · #7676

## Details

- **Author**: Shouvik Biswas
- **Price**: $6.00
- **Published**: 2026-06-25
- **Updated**: 2026-07-25
- **Added**: 2026-06-25
- **Categories**: Charts

## More like this

-   [29 Radar Chart](/component/29-radar-chart) — BrandingUp · Free — Spider chart with per-axis scales
-   [33 Bubble Chart](/component/33-bubble-chart) — BrandingUp · Free — Bubble chart with 3rd-value sizes
-   [Pricing Matrix](/component/pricing-matrix) — Ainsley Holmes · Free — Currency Payment Comparison Matrix
-   [Radial Dial](/component/radial-dial) — Oli Studio · $10 — Animated dial for a single metric