---
title: "Column Chart — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Majed Monem · Charts. Animated column chart, no libs"
canonical: "https://framer.elliotli.dev/component/column-chart"
---

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

# Column Chart

Animated column chart, no libs

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

![Column Chart preview image 1](https://framer.elliotli.dev/og/component/column-chart/82f852d6b095200a/1600x1200.jpg)

## Summary

Animated column chart, no libs

## Description

A bar 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 row per line: a label, then up to three values. That is the whole authoring step. The chart animates up from the baseline when it scrolls into view, auto-scales its axis to a rounded maximum, and starts at zero.

Vertical or horizontal. Value labels, gridlines, axis labels and a legend all switch on and off. Numbers format as plain, currency or percent, with decimals and compact notation, so 1200000 reads as 1.2M. Per series colour and name, bar radius, bar gap and group gap are property controls, and hovering a bar raises it and shows a readout.

Figures are tabular, so a value label does not change width as it counts.

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

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

-   All · #10070

## Details

- **Author**: Majed Monem
- **Price**: $8.00
- **Published**: 2026-08-15
- **Updated**: 2026-10-23
- **Added**: 2026-08-15
- **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