Doughnut Chart

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