How to convert excel time-series data to svg line charts for reporting dashboards
- Step 1Lay out the series as date + value columns — First column = the period label (
Week,Month,Day); second column = the metric (Revenue,Signups,DAU). The tool charts a single value column, so put the one series you want on the chart in that column. - Step 2Format the date/period column as text in Excel — The X-axis prints the label column as-is. A real Excel date cell becomes a long date string and gets clipped to 7 characters. Format the column as short readable text first —
Jan 24,W1,2024-01— using TEXT() or a custom cell format. - Step 3Upload and choose Line — Drop the
.xlsx/.csvonto the tool (Pro tier, in-browser) and set the Chart type dropdown to Line chart. - Step 4Set the columns if needed — Set Label column to your date/period header and Value column to your metric header. Blank fields auto-detect: first column as label, first all-numeric column as value.
- Step 5Inspect the SVG source — The result panel shows the SVG markup (text output, not a rendered image — only the first 4000 chars inline). Open the downloaded file in a browser, or paste the markup into a page, to see the rendered line.
- Step 6Export and embed in the report — Click Download to save
chart-line.svg, or Copy the source and paste the<svg>inline into your dashboard HTML / static-site template / PDF pipeline.
Line-chart render facts
Fixed behaviours of the line layout — none configurable in the UI.
| Aspect | Behaviour | Note |
|---|---|---|
| Series count | One value column only | Single-series line; there is no multi-line / overlay option. |
| Line + fill colour | Always green (#34d399) | The 8-colour palette does not apply to the line layout. |
| Area fill | Light green, opacity 0.1, under the line | Drawn only when there are 2+ points. |
| Point markers | Circle, radius 4, at every point | One marker per charted row. |
| X-axis labels | Label column printed verbatim, rotated −30°, truncated to 7 chars if > 8 | Format dates as short text in Excel first. |
| Points charted | First 20 rows (empty-label rows dropped) | Aggregate long series to ≤ 20 periods. |
| Y scale | 0 to max(values, 1), 5 grid lines | Always anchored at zero — not auto-zoomed to the data range. |
Formatting the date/period column
Excel date cells arrive as JavaScript date strings and get truncated. Convert to short text for a clean axis.
| In Excel the cell is… | On the X-axis it shows… | Fix |
|---|---|---|
A real date (2024-01-15, formatted as a date) | A clipped JS date string (e.g. Mon Jan…) | =TEXT(A2,"mmm yy") → Jan 24 |
January 2024 (text) | January (truncated to 7 chars) | Use a short form like Jan 24 |
W1, W2, … (text) | W1, W2 (fits) | No change needed |
2024-01 (text) | 2024-01 (7 chars, fits exactly) | No change needed |
Tier limits (excel family)
SVG Data Viz requires Pro tier or higher; Free is reference only.
| Tier | Max file size | Max rows | Files per run |
|---|---|---|---|
| Free | 5 MB | 10,000 | 1 (tool not available on Free) |
| Pro | 50 MB | 100,000 | 5 |
| Pro-media | 200 MB | 500,000 | 20 |
| Developer | 500 MB | unlimited | unlimited |
Cookbook
Time-series reporting scenarios. Snippets show the path/marker structure and the date-formatting fix rather than full SVG.
Monthly signups trend
The standard dashboard case: a period column formatted as short text and one metric column. Auto-detect would pick Month as label and Signups as value.
Input (signups.xlsx, sheet 1): Month,Signups Jan 24,210 Feb 24,265 Mar 24,318 Apr 24,402 Config: line, label=Month, value=Signups → chart-line.svg: green line + area fill, 4 markers, axis Jan 24 / Feb 24 / Mar 24 / Apr 24
Raw date cells produce a clipped axis
When the period column is a real Excel date, the axis prints a truncated JS date string. Convert to short text with TEXT() before uploading.
Input (dates left as Excel dates): Date,Revenue 2024-01-15,12000 ← real date cell 2024-02-15,13500 Axis renders: "Mon Jan…" (clipped JS date string) Fix in Excel: helper column =TEXT(A2,"mmm yy") → Jan 24 / Feb 24, then chart that column.
You can't overlay two series
The tool charts a single value column. To compare two metrics, generate two separate charts, or normalise both into one column with a category label and use a bar chart instead.
Want: Revenue vs Forecast on one line chart → not supported.
Option A: two charts — one for Revenue, one for Forecast.
Option B: reshape to one value column + a Series label
and use a bar chart grouped by period.
(See the unpivot tool to reshape wide → long.)Long series — aggregate to 20 points
Daily data over a quarter is ~90 rows; only the first 20 chart. Roll up to weekly or monthly buckets in Excel so the whole period is represented.
Input: 90 daily rows → only first 20 days charted. Fix: pivot/aggregate to weekly buckets (13 weeks) or monthly (3 months), then chart the summary — the full quarter fits under the 20-point cap.
Embed in a static-site report
Because it's plain SVG, paste it straight into an Astro/Hugo/Jekyll template or an HTML dashboard card — no chart component import.
<!-- dashboard card -->
<div class="card">
<h3>Monthly signups</h3>
<svg xmlns="http://www.w3.org/2000/svg" width="100%"
viewBox="0 0 640 400" ...> ... </svg>
</div>
Set width="100%" + keep the viewBox to make it fluid
within the card.Edge cases and what actually happens
Multi-series line wanted
Not supportedThe tool draws a single value column — one line. There is no option for a second series or overlay. Generate separate charts per metric, or reshape to long form and use a bar chart grouped by period.
Date column left as real Excel dates
Clipped axisDate cells come through (via cellDates) as JavaScript Date objects, stringified to a long form like Mon Jan 15 2024 … and then truncated to 7 chars on the axis. Convert the column to short text (=TEXT(A2,"mmm yy")) in Excel before uploading.
Free tier upload
Rejected (Pro required)The tool errors with SVG Data Viz requires Pro tier. on Free. Upgrade to Pro or higher to generate the line chart.
Series longer than 20 points
By design (first 20)Only the first 20 rows are charted, so a daily quarter shows only the first 20 days. Aggregate to weekly/monthly buckets in Excel so the full period fits.
Single data point
Marker onlyWith one row there's nothing to connect — the area fill and line are only drawn for 2+ points. You get a single marker on the grid. Provide at least two periods for a trend line.
Gaps / blank value cells
Charted as 0A blank or non-numeric value parses to 0, so a missing period dips the line to the baseline rather than breaking it. Fill or interpolate gaps in Excel if a dip-to-zero would mislead.
Y-axis doesn't zoom to the data range
By design (zero-anchored)The value scale runs 0 → max, so a series that wobbles between 9,800 and 10,200 looks nearly flat because the axis starts at zero. This is intentional (honest scale). To emphasise small variation, chart the delta from a baseline instead.
Negative values in a trend
Drawn above baselineThe scale uses max(values, 1) and positions points by value / max; a negative value maps below the chart's zero line and may clip. Line charts here assume non-negative metrics — chart positive series.
Long period labels
TruncatedLabels over 8 characters are clipped to 7 + ellipsis. Q1 2024 Actual becomes Q1 2024…. Use compact period labels in the sheet.
Data on a non-first sheet
Not chartedThe tool reads the first worksheet only. Move the time series to the first tab before uploading.
Frequently asked questions
Can I plot multiple lines for different metrics?
No — the tool charts a single value column, producing one line. To compare metrics, generate one chart per metric, or reshape your data to long form (one value column plus a series label) and use a grouped bar chart instead.
Why does my date axis show garbled text?
The X-axis prints the label column verbatim, and real Excel date cells arrive as long JavaScript date strings that get truncated to 7 characters. Convert the date column to short text first — e.g. =TEXT(A2,"mmm yy") for Jan 24 — then chart that column.
Are the X-axis dates auto-formatted?
No. Whatever text is in the label column is what appears (truncated if over 8 chars). Format your period labels in Excel before generating — the tool does no date parsing or formatting on the axis.
How many data points can the line show?
The first 20 rows. For longer series, aggregate to weekly or monthly buckets in Excel so the full time range is represented within the cap.
Why does my flat-looking line not show the variation I expect?
The Y-axis is anchored at zero (0 → data max), so a metric that varies in a narrow high band looks almost flat. That's an honest scale. To highlight small changes, chart the difference from a baseline value instead of the raw figures.
What colour is the line?
Always green (#34d399) with a light-green area fill at 0.1 opacity. The line layout doesn't use the 8-colour palette that bar and pie charts cycle through. Edit the stroke/fill in the downloaded SVG to recolour.
Does a blank value break the line?
No — a blank or non-numeric value parses to 0, so the line dips to the baseline for that period rather than breaking. Fill gaps in Excel if a dip-to-zero would be misleading.
Can I embed it in Astro / Hugo / Jekyll?
Yes. The output is plain static SVG, so paste the <svg> directly into a template or include the downloaded chart-line.svg as an asset. No chart-library import or hydration is needed.
Is there a live preview of the chart?
The result panel shows the SVG source code (first 4000 chars), not a rendered image — this is a text-output tool. Download chart-line.svg and open it in a browser, or paste the markup into a page, to see it render.
Does my time-series data leave my machine?
No. Parsing and SVG generation run in your browser via SheetJS; nothing is uploaded.
How do I make the chart fluid in a dashboard card?
Set width="100%" on the <svg> and keep viewBox="0 0 640 400". The viewBox preserves the aspect ratio while the chart fills its container.
How do I prep raw event rows into a clean weekly series?
Bucket and total the rows with the Pivot Table Generator first, then chart the summary. To combine series spread across tabs into one sheet, use the Multi-Sheet Joiner before charting.
Privacy first
Every JAD Excel tool runs entirely in your browser using SheetJS and ExcelJS. Your spreadsheets, formulas, and data never leave your device — verified by zero outbound network requests during processing.