---
title: "SVG Chart — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Isaac Yi · Charts. A multi-type SVG chart component for Framer — renders line, bar, and donut charts with pure SVG (no Chart.js, no D3)."
canonical: "https://framer.elliotli.dev/component/svg-chart"
---

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

# SVG Chart

Line, bar, donut. No Chart.js.

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

![SVG Chart preview image 1](https://framer.elliotli.dev/og/component/svg-chart/3abb3d0a484ba9c2/1600x918.jpg)

## Summary

A multi-type SVG chart component for Framer — renders line, bar, and donut charts with pure SVG (no Chart.js, no D3).

## Description

A multi-type SVG chart component for Framer — renders line, bar, and donut charts with pure SVG (no Chart.js, no D3). Fully panel-driven: enter data points (label, value, color) directly from the property panel, toggle grid lines, switch between dark and light themes, and adjust accent color. Includes hover tooltips with label and value display. Width (600–1400px) and height (240–600px) are both adjustable. Zero external dependencies, zero layout shift.

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

-   All · #7187

## Details

- **Author**: Isaac Yi
- **Price**: $10.00
- **Published**: 2026-06-30
- **Updated**: 2026-09-18
- **Added**: 2026-06-30
- **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