---
title: "Basic Pie Chart — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Ahmet Loca · Charts. Basic Pie Chart is a premium, fully responsive interactive donut pie chart component built for Framer."
canonical: "https://framer.elliotli.dev/component/basic-pie-chart"
---

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

# Basic Pie Chart

Responsive interactive pie chart

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

![Basic Pie Chart preview image 1](https://framer.elliotli.dev/og/component/basic-pie-chart/6ab66deccd6777b5/1600x1200.jpg)

## Summary

Basic Pie Chart is a premium, fully responsive interactive donut pie chart component built for Framer.

## Description

**MORE FRAMER COMPONENTS LIKE THIS**

**✦ Browse +38 FREE + 85 premium components:** [**https://frameze.com/components**](https://frameze.com/components)

## About Basic Pie Chart

Basic Pie Chart is a premium, fully responsive interactive donut pie chart component built. It displays multi-slice data with smooth hover tooltips, clickable legend, center value updates and percentage labels. Designed with the same clean visual language as modern SaaS dashboards, it supports dark and light themes, demo mode for live previews, and complete customization. Perfect for ARR breakdowns, plan tier analysis, revenue mix, and data storytelling. Accessible, SEO-optimized and ready for production with zero setup.

**Key Features**

-   Beautiful interactive donut / pie chart with up to 12 slices
    
-   Smooth hover tooltips showing ARR, accounts and avg contract
    
-   Center label that dynamically updates on hover
    
-   Clickable legend to show/hide individual slices
    
-   Percentage labels outside the ring
    
-   Configurable outer radius, inner ratio and gap between slices
    
-   Built-in Dark & Light themes with instant switching
    
-   Fully responsive — optimized size, fonts and spacing on mobile
    
-   Custom data: label, color, ARR, accounts, avg contract
    
-   Accessible design with screen-reader support and [Schema.org](http://Schema.org) markup
    
-   SEO-friendly structure for better Google indexing
    
-   Smooth reduced-motion support
    
-   Works out of the box — no code or setup needed
    

**Use Cases**

SaaS ARR and revenue mix dashboards

Plan tier and pricing analysis pages

Customer segmentation visualizations

Startup investor decks and pitch reports

Marketing performance and conversion breakdowns

Product analytics and feature adoption

Financial overview and revenue distribution

E-commerce sales category breakdowns

Educational and research data presentations

Health, fitness and progress tracking

Project management resource allocation

**Keywords**

pie chart, donut chart, interactive pie chart, responsive pie chart, data visualization framer, hover tooltip chart, saas metrics chart, multi slice pie chart, dashboard chart 

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

-   All · #2145

## Details

- **Author**: Ahmet Loca
- **Price**: $3.00
- **Published**: 2026-08-18
- **Updated**: 2026-09-30
- **Added**: 2026-08-18
- **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