Doughnut Chart

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

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

Clean custom charts that make data pop.