Offline Chart Editing in Chrome’s Side Panel - CSV In, PNG Out, No Upload

I ship a lot of one-off charts for decks and docs. The workflow I kept failing at wasn't "pick a chart type." It was getting a clean PNG without sending a client CSV to a random site.

So I built the loop I actually wanted: open a side panel, drop a file, tweak series and labels, export. The bytes stay in the browser. Below is the tutorial version of that pattern - what the side panel buys you, how the local pipeline fits together, and where BeCharts sits if you want the packaged version instead of wiring it yourself.

Why a side panel beats a new tab (for charts)

A popup is too small for a legend + axis editor. A full tab steals focus from the doc you're writing. Chrome's Side Panel is the middle ground:

• stays pinned while you copy numbers from Sheets / Notion / a PR comment
• has room for a chart canvas + controls
• doesn't force you through another SaaS login wall mid-thought

If you've never shipped one, the shape is roughly: sidePanel.setOptions → your extension page → talk to the page with messaging only when you need selection context. For charts you often need zero page access - just FileReader on a drop.

The offline pipeline (tutorial)

Same architecture whether you DIY or use a packaged tool:

1. Ingest - File / paste → parse CSV/Excel in memory
2. Bind - pick columns → series / category / optional size
3. Render - chart lib draws to canvas / SVG (ECharts, Chart.js, …)
4. Edit - titles, colors, stack vs group, number formats
5. Export - canvas.toBlob / SVG serialize → download
6. Never - POST the sheet "for convenience"

Concrete checks I run before I trust a tool with a sheet:

• Open DevTools → Network → Offline → can I still export?
• Does the privacy page say no server upload by default?
• Can I paste a redacted sample and get the same UI as a real file?

If (1) fails, it's not offline. If (2) is fuzzy, I treat it as upload.

Editing without leaving the panel

The part people underestimate isn't the first render - it's the five tweaks before the PNG is deck-ready:

• rename a series without renaming the CSV column
• clamp a weird max so one outlier doesn't squash the bars
• flip bar → line when the story is trend, not comparison
• turn off animation so the export isn't a blurry mid-frame
• keep brand colors as tokens, not hard-coded hex you'll regret

Do those in a side panel next to your slide outline and you stop context-switching into yet another "free chart maker" that wants an account.

DIY sketch (enough to feel the pattern)

Minimal ingest + download (library-agnostic):

async function ingest(file) {
  const text = await file.text(); // or a SheetJS parse for .xlsx
  return parseCsv(text); // → { headers, rows }
}

function exportPng(canvas, name = "chart.png") {
  canvas.toBlob((blob) => {
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = name;
    a.click();
    URL.revokeObjectURL(a.href);
  });
}

Wire your chart lib's setOption / update between those two. Keep parse and render as separate steps so you can later add a local heuristic ("looks like date + number → line") without shipping the whole table to a model host.

When I reach for BeCharts

I don't need another SaaS dashboard. I need offline side-panel chart editing for Excel/CSV: drop → edit → PNG/SVG, data stays local. That's what I packaged as BeCharts - Offline Chart Maker in Your Side Panel.

Site and privacy notes live at becharts.com and becharts.com/privacy. Use it if you want the loop above without assembling the extension shell. Skip it if you already have a chart lib in-app and only need a twenty-line export helper - the pattern matters more than any one store listing.

Soft rules so this doesn't become another upload habit

• Default never upload; sync is a second, explicit action if you ever add it
• Prefer side panel for edit sessions that sit next to writing
• Export PNG + SVG so slides and docs both get a clean artifact
• Test the offline path once before you trust it with client numbers

Takeaway

Offline chart editing is a DX problem disguised as a design problem. Put the editor where you already work (side panel), keep the pipeline local (ingest → bind → render → export), and only then decide whether to package it or DIY.

If you want the packaged path, start here: Chrome Web Store - BeCharts. If you DIY, steal the checklist and ignore the brand. Either way, your CSV shouldn't need an account to become a PNG.