ChartCard

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