---
title: "ChartCard — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Hamim Reza · Charts. Animated finance chart with data"
canonical: "https://framer.elliotli.dev/component/chartcard"
---

[Home](/)/[Components](/components)/[Charts](/components/category/charts)/ChartCard

# ChartCard

Animated finance chart with data

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

![ChartCard preview image 1](https://framer.elliotli.dev/og/component/chartcard/cdbc94875e34a67f/1600x1200.jpg)

## Summary

Animated finance chart with data

## Description

An animated financial chart card with interactive time period selection, three data source modes, and a drawing SVG path animation. Gradient border, bottom glow, radial card background and vertical grid lines. Built for crypto dashboards, stock trackers, analytics displays, and any fintech interface that needs a premium data visualization card.

## Features

-   Animated SVG chart path — draws and redraws on an 8-second infinite loop
    
-   Hover zoom on chart — 1.5x scale with smooth transition
    
-   Interactive time period selector — 1H, 1D, 1W, 1M, ALL
    
-   Selected period button scales to 1.1x with gradient background
    
-   Three data source modes — static and JSON
    
-   Gradient border top to bottom
    
-   Bottom glow effect with 70px blur
    
-   Radial gradient card background for depth
    
-   Four vertical grid lines with gradient opacity
    
-   Gradient text effects on title and change percentage
    
-   15+ color controls across container, buttons, text and chart
    
-   Three font controls — title, change and buttons
    
-   No dependencies
    

## Data Source Modes

**Static** — hardcoded title and change % set directly in Framer properties. Best for mockups and fixed displays.

**JSON** — direct JSON input for custom datasets. Useful for testing or static complex data.

## Property Controls

**Data Source**

-   Data source type — static, JSON
    

**Content**

-   Title text · Change percentage text
    

**Colors**

-   Container
    
-   Buttons
    
-   Text
    
-   Chart
    

**Typography** — title font · change font · button font · size, weight, spacing, line height

**SEO Keywords**

framer chart card · framer crypto card · framer finance component · framer data visualization · framer chart component · framer crypto dashboard · framer stock chart · framer KPI card · framer analytics card · framer financial dashboard · framer animated chart · framer data card · framer metric card · framer code component · framer dashboard component

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

-   All · #4618

## Details

- **Author**: Hamim Reza
- **Price**: $10.00
- **Published**: 2026-04-15
- **Updated**: 2026-07-09
- **Added**: 2026-04-07
- **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