How to Format CSV Data for Animated Charts
Framechart reads CSV files with a simple structure: row 1 contains column headers, column 1 is labels (text), column 2 is values (numbers). Export from Google Sheets or Excel as UTF-8 CSV.
Most common issue: numbers formatted with commas (1,234) — Framechart reads these as text, resulting in zero values. Remove commas from number formatting before export.
Required CSV Structure
The minimum structure for a bar or line chart in Framechart:
Company,Revenue
← Row 2+: Data rows
Apple,383
Microsoft,212
Alphabet,305
Amazon,525
| Column | Type | Used As | Example |
|---|---|---|---|
| Column 1 | Text | X axis (labels or time) | Apple, Microsoft, Alphabet |
| Column 2 | Number (no commas) | Y axis (values) | 383, 212, 305 |
| Column 3+ | Any | Line chart race: additional line series. Data table: additional display columns. Bar chart: ignored. | See line chart race guide |
Common Formatting Issues and Fixes
| Issue | Example | Fix |
|---|---|---|
| Commas in numbers | "1,234,567" | Remove comma formatting. In Google Sheets: Format → Number → Number |
| Currency symbols in values | "$383B" or "€212M" | Remove $ or € symbols. Use plain numbers only |
| Empty rows | Blank rows between data rows | Delete all blank rows before exporting CSV |
| Merged cells | Merged header cells in Excel | Export from Sheets as CSV to auto-resolve merged cells |
| Non-UTF-8 encoding | Special characters appear garbled | In Excel: Save As → CSV UTF-8 (not plain CSV) |
| Semicolon delimiters | Company;Revenue (European Excel) | Re-save as CSV with comma delimiters in Google Sheets |
| Percent signs in values | "8%" or "12.5%" | Use plain decimal numbers: 8 or 12.5 |
Date Formats That Work
For time series data, these date and period formats work as X axis labels in Framechart:
| Format | Example | Works |
|---|---|---|
| YYYY-MM-DD | 2024-01-15 | Yes |
| Month YYYY | Jan 2024 | Yes |
| Q# YYYY | Q1 2024 | Yes (as text label) |
| Year number | 2020 | Yes |
| Plain text | Q1, Q2, Q3 | Yes (as text label) |
| MM/DD/YYYY | 01/15/2024 | Yes |
Exporting from Google Sheets
- 1. Open your Google Sheets spreadsheet
- 2.Remove comma formatting from number columns: select value column → Format → Number → Number
- 3. Delete any empty rows
- 4.File → Download → Comma Separated Values (.csv)
Google Sheets always exports as UTF-8 and comma-delimited, which is what Framechart expects.
Exporting from Excel
- 1. Remove comma formatting: select value cells → right-click → Format Cells → Number category → set decimal places, uncheck "Use 1000 Separator"
- 2.File → Save As
- 3.In the format dropdown, select CSV UTF-8 (Comma delimited) (.csv) — not plain "CSV" which can use system encoding
- 4. Click Save
If you're in a European locale where Excel uses semicolons as CSV separators, explicitly choose "CSV UTF-8 (Comma delimited)" to force comma delimiters.
CSV Format for Line Chart Race
A line chart race uses a different CSV structure from a standard bar or line chart. Instead of two columns, you need one column per line series:
2000,10251,1211,1949,4888,477
2005,13037,2286,2861,4755,820
2010,15049,6101,3417,5700,1709
2015,18225,11016,3380,4395,2103
2020,21373,14688,3846,5055,2671
2024,27360,17700,4460,4213,3730
- →Column 1 is the time axis (years, months, or dates). All other columns are individual line series.
- →Row 1 must be headers — these become the line labels in the chart.
- →All value columns must be plain numbers. Missing values will break that line — fill gaps with 0 or interpolated values.
- →For 5–10 line series, keep one column per series. More than ~10 lines becomes difficult to read at video resolution.
Full workflow: Line Chart Race Maker guide.
Multiple Column CSVs for Data Tables
For data tables, all columns in your CSV appear in Framechart's column selector. You can configure which columns to display and in what order. This allows you to have additional columns in your CSV (e.g., internal IDs, notes) that don't appear in the table.
1,Apple,383,8%,161000
2,Microsoft,212,18%,221000
3,Alphabet,305,9%,182000
See Create Animated Data Table for full configuration details.
Frequently Asked Questions
Why does Framechart show zero values even though my CSV has data?
This usually happens when numbers are formatted with commas (e.g., "1,234,567"). Framechart reads these as text, not numbers. Fix: in Google Sheets, select the value column → Format → Number → Number (removes comma separators). Then re-export the CSV.
How many rows can a Framechart CSV have?
Framechart works best with 5-30 rows for bar and line charts (beyond 30, individual bars become too narrow to read at video resolution). Data tables can display up to ~20 rows clearly. For large datasets, filter to the most relevant rows before exporting.
Does Framechart support CSV with more than 2 columns?
Yes. For bar charts: select one X and one Y column — extra columns are ignored. For line chart races: column 1 is the time axis and every additional numeric column becomes a separate line series. For data tables: configure which columns to display.
My CSV uses semicolons instead of commas — does Framechart support this?
Framechart expects standard comma-delimited CSV. If your file uses semicolons (common in European Excel exports), open in Google Sheets or Excel and re-save as CSV with comma delimiters.
Related
Last reviewed: April 2026