---
title: "Donut Diagram Visual — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Chris Lacorte · Charts. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/donut-diagram-visual"
---

[Home](/)/[Components](/components)/[Charts](/components/category/charts)/Donut Diagram Visual

# Donut Diagram Visual

Donut Diagram

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

![Donut Diagram Visual preview image 1](https://framer.elliotli.dev/og/component/donut-diagram-visual/b690062831083c77/1600x1200.jpg)

## Summary

Donut Diagram

## Description

Donut Diagram Visualizer helps you add clean and modern data visualization to your website or landing page.

-   🎯 **Customizable** – change colors, thickness, and percentages to match your brand.
    
-   🎛 **Interactive** – control both rings easily with a built-in range slider.
    
-   ✨ **Animated Text** – percentage values update smoothly for a polished look.
    
-   ⚡️ **Lightweight** – optimized for performance, works across all devices.
    

Perfect for dashboards, presentations, and landing pages that need a touch of interactive data storytelling.

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

-   All · #10851

## Details

- **Author**: Chris Lacorte
- **Price**: $5.00
- **Published**: 2025-09-11
- **Updated**: 2026-06-19
- **Added**: 2025-08-24
- **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