A donut chart and pie chart for Framer, drawn in the component with no charting library and nothing loaded from a server.
Enter the data as plain lines of text, one label and value per line. The ring sweeps in from your start angle when it scrolls into view.
Thickness is a control, and at zero it becomes a pie. Slice gap, rounded slice ends, start angle and six cycling slice colours are all controls. The legend carries values and percentages and sits right or below. The centre reads the total, the largest slice, or whichever slice the visitor is pointing at, under a label you write.
Percentages are made to sum to 100 rather than to 99.9, by giving the largest slice the rounding remainder. Figures are tabular, so the centre readout does not change width as it switches.
After purchase you receive the component URL. In Framer, press Insert, choose Add Component URL, and paste it.
Licence: yours to use on your own sites and on client sites, commercially, with no attribution. Not for resale or redistribution: do not share the component URL, and do not publish the component or its code anywhere, paid or free. Full terms arrive with your purchase. Questions: me@majedesigns.dev
A donut chart and pie chart for Framer, drawn in the component with no charting library and nothing loaded from a server.
Enter the data as plain lines of text, one label and value per line. The ring sweeps in from your start angle when it scrolls into view.
Thickness is a control, and at zero it becomes a pie. Slice gap, rounded slice ends, start angle and six cycling slice colours are all controls. The legend carries values and percentages and sits right or below. The centre reads the total, the largest slice, or whichever slice the visitor is pointing at, under a label you write.
Percentages are made to sum to 100 rather than to 99.9, by giving the largest slice the rounding remainder. Figures are tabular, so the centre readout does not change width as it switches.
After purchase you receive the component URL. In Framer, press Insert, choose Add Component URL, and paste it.
Licence: yours to use on your own sites and on client sites, commercially, with no attribution. Not for resale or redistribution: do not share the component URL, and do not publish the component or its code anywhere, paid or free. Full terms arrive with your purchase. Questions: me@majedesigns.dev
