---
title: "Simple SVG Chart — Free Framer component · Best of Framer"
description: "Free Framer component · by vora · Charts. Bar & Line chart with full color control"
canonical: "https://framer.elliotli.dev/component/simple-svg-chart"
---

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

# Simple SVG Chart

Bar & Line chart with full color control

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

![Simple SVG Chart preview image 1](https://framer.elliotli.dev/og/component/simple-svg-chart/823ffb1e43f2923b/1600x1200.jpg)

## Summary

Bar & Line chart with full color control

## Description

What's included:

\- Bar and Line chart types (switchable)

\- Smooth entrance animations (toggleable)

\- Full color customization including background and grid

\- Font Family customization

\- Padding control

\- Show/hide values and labels independently

\- Bar Radius and Line Width control

Property Controls:

Data, Chart Type, Color, Label Color, Value Color,

Background, Grid Color, Font Family, Padding,

Show Values, Show Labels, Animate, Bar Radius, Line Width

Need help or custom modifications? Feel free to reach out.

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

-   All · #7947

## Details

- **Author**: vora
- **Published**: 2026-04-15
- **Updated**: 2026-04-15
- **Added**: 2026-04-01
- **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