---
title: "Donut / Pie Chart — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Jotted Studios · Charts. Donut / Pie Chart Properties Panel"
canonical: "https://framer.elliotli.dev/component/donut-chart"
---

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

# Donut / Pie Chart

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

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

## Summary

Donut / Pie Chart Properties Panel

## Description

## About this component

A sleek, customizable, and interactive donut chart component designed for Framer. Easily switch between donut and pie views, adjust colors, labels, and percentages to fit your data needs, perfect for dashboards, reports, or data-driven interfaces.

![Seamlessly transform a donut to a pie chart with one property control.](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8niy0y37-hAbyM9R4DKj1RmYUXmemijxhGldWXq)Seamlessly transform a donut to a pie chart with one property control.

## Properties

Simply copy the component into your Framer project and customize it effortlessly to match your design.

-   **Dividers** – Add or remove as many segments as needed. Customize each divider with individual colors and set precise percentage values for total control over the chart layout.
    
-   **Labels** – Adjust font, color, and size. Toggle visibility to show or hide all labels.
    
-   **Percentages** – Customize font, color, and size. Toggle visibility of percentages shown on the chart.
    
-   **Legend** – Fully configurable font, color, and size with the option to show or hide.
    
-   **Center Hole Size** – Set the inner radius to zero to seamlessly switch to a full pie chart.
    
-   **Chart Size** – Easily adjust the overall diameter of the chart.
    
-   **Stroke** – Modify the color and thickness of the segment dividers within the chart.
    

![Donut / Pie Chart Properties Panel](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8niy0y37-mtZDfp236UhJcCoxZcKY2N6uISmvUG)Donut / Pie Chart Properties Panel

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

-   All · #9317

## Details

- **Author**: Jotted Studios
- **Price**: $8.00
- **Published**: 2025-08-08
- **Updated**: 2025-09-19
- **Added**: 2025-08-04
- **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