---
title: "Semi-Circle Chart — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Robbi Firmansah · Charts. The Semi-Circle Progress Chart component displays progress with a smooth animated arc and a central percentage value, perfect…"
canonical: "https://framer.elliotli.dev/component/semi-circle-chart"
---

[Home](/)/[Components](/components)/[Charts](/components/category/charts)/Semi-Circle Chart

# Semi-Circle Chart

[View on Framer](https://framer.com/marketplace/components/semi-circle-chart/?via=elliot-li)

![Semi-Circle Chart preview image 1](https://framer.elliotli.dev/og/component/semi-circle-chart/d6c44f1fe42c82dd/1600x1200.jpg)

## Summary

The Semi-Circle Progress Chart component displays progress with a smooth animated arc and a central percentage value, perfect for reports and performance metrics.

## Description

The **Semi-Circle Progress Chart** component displays progress with a smooth animated arc and a central percentage value, perfect for reports and performance metrics. You can fully customize it—set target and start percentages, choose progress and background colors, adjust stroke width and chart size, and define animation duration. The chart can trigger on scroll for interactive effects, and the percentage text can be either animated or static.

## Rank history [How rankings work →](/terms#rankings)

-   All · #6908

## Details

- **Author**: Robbi Firmansah
- **Price**: $3.00
- **Published**: 2025-08-21
- **Updated**: 2025-08-19
- **Added**: 2025-08-14
- **Categories**: Charts

## More like this

-   [29 Radar Chart](/component/29-radar-chart) — BrandingUp · Free — Spider chart with per-axis scales
-   [33 Bubble Chart](/component/33-bubble-chart) — BrandingUp · Free — Bubble chart with 3rd-value sizes
-   [Pricing Matrix](/component/pricing-matrix) — Ainsley Holmes · Free — Currency Payment Comparison Matrix
-   [Radial Dial](/component/radial-dial) — Oli Studio · $10 — Animated dial for a single metric