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.
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
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.
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
João Saraiva
