Pie Donut Chart

All-in-One Framer Pie & Donut Chart Component

Looking for a versatile, customizable chart for your Framer projects? This lightweight, interactive Pie & Donut Chart component is designed to render crisp vector visuals with smooth hover interactions out of the box.

Whether you need a full pie, a clean donut ring, or a minimalist data visualization, you can control everything directly from Framer’s inspector panel no coding required.

Key Features & Customizations

• Flexible Chart Layouts: Easily build full pie charts or donut ring styles with a customizable inner hole size (Hole Size %).

• Interactive Hover Pop-Out: Sleek radial pop-out offset and drop shadow effect when users hover over any slice (Hover Offset).

• Dynamic Array Management: Add, remove, or reorder items on the fly with individual controls for Label, Value, and Color.

• Custom Legend Controls:

  • Toggle Legend visibility.

  • Show or hide raw Legend Values.

  • Adjust Legend Font Size, Text Color, and Legend Gap.

  • Fine-tune color indicator boxes using Box Size and Box Radius controls.

• Center Summary Text: Toggle center overlay text with independent controls for Center Value, Center Label, sizes, and colors.

• Slice Percentage Labels: Toggle slice percentage text visibility with custom Slice Font Size and Slice Text Color.

• Global Typography: Set your preferred Font Family across all chart elements to match your brand style.

If this component saves you time, please give it a like and share your feedback in the comments! It is 100% free to use in any personal or commercial Framer project.

Need custom component help or have questions? Drop me a message at rubabmubashar174@gmail.com.