Donut Chart
A customizable, interactive donut chart component that can seamlessly switch to a pie chart, featuring custom labels and percentage displays.
Make it with Workshop
Build your own component with AI
About this component
A sleek, customizable, and interactive donut chart component designed for Framer. Easily switch between donut and pie views, adjust colors, labels, and percentages to fit your data needs, perfect for dashboards, reports, or data-driven interfaces.
Properties
Simply copy the component into your Framer project and customize it effortlessly to match your design.
Dividers – Add or remove as many segments as needed. Customize each divider with individual colors and set precise percentage values for total control over the chart layout.
Labels – Adjust font, color, and size. Toggle visibility to show or hide all labels.
Percentages – Customize font, color, and size. Toggle visibility of percentages shown on the chart.
Legend – Fully configurable font, color, and size with the option to show or hide.
Center Hole Size – Set the inner radius to zero to seamlessly switch to a full pie chart.
Chart Size – Easily adjust the overall diameter of the chart.
Stroke – Modify the color and thickness of the segment dividers within the chart.
