---
title: "Horizontal BarGraph — Framer component · Best of Framer"
description: "$5.00 · Framer component · by raffaele parlato · Charts. The Horizontal BarGraph is a Framer component built to communicate metrics at a glance."
canonical: "https://framer.elliotli.dev/component/horizontal-bargraph"
---

[Home](/)/[Components](/components)/[Charts](/components/category/charts)/Horizontal BarGraph

# Horizontal BarGraph

Interactive BarGraph component

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

![Horizontal BarGraph preview image 1](https://framer.elliotli.dev/og/component/horizontal-bargraph/7f9f9a4f9545f039/1600x1200.jpg)

## Summary

The Horizontal BarGraph is a Framer component built to communicate metrics at a glance.

## Description

The Horizontal BarGraph is a Framer component built to communicate metrics at a glance. It’s ideal for showing performance, adoption, or usage data in a clear, readable, and scannable way — especially when comparing multiple metrics vertically.

Each bar represents a single metric with a clear label and value, making it easy to understand trends without cognitive overload. Values can be displayed as percentages or numbers, with progress emphasized through subtle contrast and smooth horizontal fills.

The component helps users focus on what matters while keeping the overall context visible. Animations can be enabled or disabled for static layouts, depending on the use case.

Every visual aspect is customizable — including colors, typography, bar height, spacing, corner radius, and value formatting. The layout is fully responsive and works seamlessly across dashboards, case studies, and data-heavy sections.

Designed with a minimal, modern aesthetic in mind, the Horizontal BarGraph integrates naturally into clean layouts and content-focused experiences, giving designers full control over both behavior and styling.

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

-   All · #4022

## Details

- **Author**: raffaele parlato
- **Price**: $5.00
- **Published**: 2026-02-23
- **Updated**: 2026-02-23
- **Added**: 2026-02-04
- **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