Create professional, interactive charts directly on your canvas.
Turn boring numbers into visual stories. Whether you are designing a dashboard, a financial report, or a prototype, Charts for Framer makes it effortless.
All the Essentials: Switch instantly between Bar, Line, Pie, Radar, and Scatter charts with a single click.
Live Data Sync: Connect directly to Google Sheets for real-time updates, or pull data from your Database via API.
Smart & Simple: Type numbers manually for quick mockups, or use Random Mode to fill empty space instantly.
Total Design Control: Tweak colors, fonts, rounded corners, and legends to match your brand perfectly.
Don't settle for static images. Connect your chart to real-world data.
Google Sheets: Paste a link to your published spreadsheet. When you update the numbers in Google Sheets, your Framer site updates automatically!
Databases & APIs: Connect to any API endpoint (JSON or CSV) to display live user data, financial stats, or dynamic content from your backend.
To ensure your chart reads your data correctly, your table (Excel, Google Sheet, or API data) should follow this simple structure:
1. The First Row is for Headers
The top row must contain names for your data (e.g., "Month", "Sales", "Revenue"). The component uses these names to identify what to plot.
2. Structure Example
You need one column for the X-Axis (Categories/Labels) and one or more columns for the Y-Axis (Values).
Month, Sales, Profit
Jan, 4000, 2400
Feb, 3000, 1398
Mar, 2000, 9800
Follow these steps to generate a live CSV link from Google Sheets:
Prepare Data: Organize your data in Google Sheets with headers in the first row.
Publish: Go to File > Share > Publish to web.
Select Format (Important):
Change "Web page" to "Comma-separated values (.csv)".
Change "Entire Document" to the specific Sheet you want to use (e.g., "Sheet1").
Get Link: Click Publish, then copy the generated link.
Paste into Framer:
Set Data Source to API.
Paste the link into the API URL field.
V2SPACE
