---
title: "Progress Bar Chart — Free Framer component · Best of Framer"
description: "Free Framer component · by Refinery Studio · Charts. A customizable progress chart"
canonical: "https://framer.elliotli.dev/component/progress-bar-chart"
---

[Home](/)/[Components](/components)/[Charts](/components/category/charts)/Progress Bar Chart

# Progress Bar Chart

A customizable progress chart

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

![Progress Bar Chart preview image 1](https://framer.elliotli.dev/og/component/progress-bar-chart/b5bb5e177462ad36/1600x1200.jpg)

## Summary

A customizable progress chart

## Description

Turn numbers and milestones into clear, polished progress visualizations. Create horizontal progress bars that make goals, performance, completion, and comparisons easy to understand at a glance.

**Progress Visualization** Display one or multiple progress bars with customizable values, labels, percentages, and completion states.

**API Ready** Connect the component to your API and dynamically populate progress data, making it ideal for live dashboards, analytics, goals, and data-driven experiences.

**Flexible Data** Use manual values for simple static displays or connect external data for automatically updated progress.

**Fully Customizable** Control the appearance of bars, labels, percentages, spacing, typography, colors, and other visual details to match your design.

**Built for Any Use Case** Perfect for project progress, goals, analytics, fundraising, skills, performance metrics, completion tracking, and dashboards.

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

-   All · #5357

## Details

- **Author**: Refinery Studio
- **Published**: 2026-09-12
- **Updated**: 2026-09-12
- **Added**: 2026-09-12
- **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