Working with spreadsheets

Convert an Excel workbook to CSV, then chart it straight from your content.

<DataChart> and <DataTable> read JSON, YAML, TOML, CSV and TSV. Excel workbooks are not read directly, and that is deliberate: .xlsx is a zip archive of XML with merged cells, formulas and its own date encoding, and the parsers for it are a heavyweight dependency every reader of your site would carry. Exporting to CSV takes two clicks and loses nothing a chart can draw.

Convert a workbook to CSV

Open the workbook, then File → Save As and choose CSV UTF-8 (Comma delimited) (.csv).

Excel saves only the active sheet, so repeat this once per sheet you need. Keep the header row and it becomes the column names your components reference.

Open the sheet, then File → Download → Comma Separated Values (.csv).

As with Excel, this exports the current tab only.

Open the spreadsheet, then File → Export To → CSV….

Under Advanced Options, set the text encoding to Unicode (UTF-8) so accented characters survive the trip.

For a whole workbook at once, csvkit writes one CSV per sheet:

pip install csvkit
in2csv --names report.xlsx          # list the sheet names
in2csv --sheet "Q4" report.xlsx > q4.csv

Add it to your content

Drop the file in packages/content/data/, then reference it by name:

<DataChart
  src="frameworks.csv"
  label="framework"
  value="sites"
  type="bar"
  title="Sites by framework"
/>

label and value name the columns to plot. Both accept a header name or a zero-based index, and both are optional, and they default to the first and second columns.

That file looks like this:

framework,sites,ecosystem
Astro,42,Agnostic
Next.js,38,React
Hugo,21,Go
VitePress,9,Vue

And renders like this:

frameworksitesecosystem
Astro42Agnostic
Next.js38React
Hugo21Go
VitePress9Vue

Things worth knowing

  • Quoted fields are safe. Commas and line breaks inside "Smith, John" are preserved.
  • Numbers are detected, identifiers are not. 42 and -3.5 become numbers; 007 stays a string, because zero-padded values are almost always codes rather than quantities.
  • Ragged rows are padded, not rejected. A short row gets empty cells rather than failing your build.
  • Tab-separated files work too, with a .tsv extension.