5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tf83,

Description

Doughnut Chart for Framer: clean, dynamic, and fully customizable charting without code.

The Doughnut Chart component allows you to quickly add responsive doughnut charts to your Framer projects. It’s powered by Chart.js under the hood, giving you smooth animations, flexible styling, and the ability to use either static data or live data from an API endpoint. It's perfect for dashboards, reports, analytics views, and data-driven designs.

Customization

You can customize all the content:

Title—Control text, color, size, position, alignment, and padding
Legend—Toggle display, choose position, adjust label padding, font size, and color
Total Value Display—Show the dataset total in the chart center, add a legend label, and customize spacing, size, and colors
Data—Add static data with labels, values, and custom colors, or fetch data dynamically from any API endpoint

You can customize all the styles:

Cutout size of the doughnut
Title size, alignment, and position
Legend text color, size, and spacing
Chart legend background and border colors
Total value font size, spacing, and color
Toggle animations on/off

Usage

To use the component, copy it and paste it into your Framer canvas.

All of the dynamic properties can be adjusted directly from the right-hand sidebar in the DoughnutChart section.

Properties

Cutout—Control the inner cutout size of the doughnut
Data Source
- Fetch Data from URL—Enable/disable live data fetching
- Endpoint URL—API endpoint for chart data
- Manual Chart Data—Manually add data items:
  - Label—Dataset label
  - Value—Numeric value
  - Background Color—Fill color of chart segment
  - Border Color—Outline color of chart segment
Legend
- Show—Toggle legend visibility
- Position—Top or bottom
- Labels
  - Padding—Space around legend items
  - Text Color—Label text color
  - Font Size—Label font size
Title
- Show—Toggle title visibility
- Text—Title content
- Size—Text size
- Color—Text color
- Align—Start, center, end
- Position—Top, left, bottom, right
- Padding—Spacing around title
Total Options
- Show Total—Toggle center value display
- Auto Size—Automatically size the total text
- Size—Manual size (if Auto Size is off)
- Color—Color of total value text
- Show Total Legend—Toggle display of total label (e.g., “Total”)
- Total Legend Text—Customize label text
- Auto Space Between Lines—Automatically space total and label
- Space Between Lines—Set custom spacing (if Auto Space is off)
Animation—Enable or disable chart animations

5a:[["$","$L5d",null,{"post":{"id":"0199aacd-e12d-781d-83b4-11f626f06bf9","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7c929c23-1162-47a4-b459-a0651efe64aa","name":"Concealed","slug":"concealed","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1242931/avatar-UwgSqFrdUyvuNG93m0Z8JtGKDbBCSt.jpg","badges":["available","pro","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"8ZShlHJ5nJx3geFfPXZO","resolved":true,"title":"Doughnut Chart","body":"$5e","bodyJson":null,"introduction":"Clean custom charts that make data pop.","slug":"doughnut-chart","author":{"framerUserId":"7c929c23-1162-47a4-b459-a0651efe64aa","name":"Concealed","slug":"concealed","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1242931/avatar-UwgSqFrdUyvuNG93m0Z8JtGKDbBCSt.jpg","badges":["available","pro","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/8ZShlHJ5nJx3geFfPXZO/doughnut-chart-gy0o1ajuuwpKeaVWX1C0s1zhOhB2iW","metadata":{"tint":{"h":240,"s":57,"l":22},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-09-29T16:04:02.962Z","updatedAt":"2026-04-14T12:25:11.119Z","publishedAt":"2025-10-03T16:00:43.309Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://aware-principles-653532.framer.app/","price":"2","paymentUrl":"https://buy.polar.sh/polar_cl_YGvV5mlpZM1UXqMoTxvjolp0IirC9WhobDnsG3YwXb6","workshop":false,"categories":[{"id":"51314a1b-a5bd-4ae8-acf0-bd3d5058c367","name":"Charts","slug":"charts"}],"lastSaveId":"8gTtXL10FbTxAfx1rv1u","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-03T16:00:43.309Z","updatedAt":"2025-10-03T16:00:43.309Z","reported":false}}],"$L5f"]

Suggested for you