VSPlot — Data preview & charts inside VS Code

Turn CSV, JSON, TSV, DAT, and scientific flat files into filterable tables and interactive Chart.js dashboards without leaving the editor.

Why VSPlot?

• Instant insight: Preview large tabular files in a dedicated webview with search, sorting, pagination, stats, and row selection tailored for data exploration.
• Chart.js built-in: Launch the chart builder directly from the preview, apply aggregations, dual axes, zooming, and style presets — all powered by Chart.js v4.
• Smart parsing: Auto-detects delimiters, skips comment lines, and gracefully handles inconsistent columns so you keep working instead of cleaning data first.
• Stays in sync: Webviews remember layout preferences, compact cards, icon toggles, and chart configuration per file to keep your workspace focused.
• Fits your workflow: Works from Explorer, text editor context menus, or command palette, and ships with sample datasets for rapid demos.

Quickstart: preview → chart in under a minute

1. Install VSPlot from the Marketplace or search "VSPlot" inside VS Code.
2. Open or right-click a data file (.csv, .json, .tsv, .dat, .tab, .out, .data, .txt) and choose Preview Data.
3. Filter, search, and sort within the preview webview, then press the Create Chart button in the toolbar to open the Chart view beside it.
4. Pick an X axis, up to two Y axes, adjust aggregation/zoom presets, and export the chart as a PNG. Need to go back to the data grid? Hit the new Preview Data button inside Chart view to jump right back without leaving the webview stack.

Development & Linting

This project uses Biome for linting and formatting. Run locally:

# Run linting
npm run lint

# Auto-format files
npm run format

See CONTRIBUTING.md for Husky and lint-staged setup and CI behaviour.

💡 Need sample datasets? Run bash scripts/setup-test-data.sh (or use the downloaded archives) and open anything under sample-data/ to explore the UI immediately.

Preview data in seconds

• Column-aware filtering: Search across columns, toggle sort order, and paginate large files without waiting.
• Row-level insight: Select specific rows to recompute statistics (count, min, max, mean, median, stddev) on the fly.
• Delimiter overrides: Switch delimiters from the toolbar (Auto, ,, |, ;, :, \t, space) and the view reparses instantly.
• Export Data button: Save exactly what is visible (including filters) to CSV for sharing or downstream analysis.

Build interactive charts with Chart.js

• Multiple chart types: Line, bar, scatter, pie, doughnut, and radar with presets for color palettes and number formatting.
• Dual-axis & aggregation: Plot metrics on primary and secondary Y axes, aggregate categorical data (sum, count, avg, min, max), and switch between linear/time scales.
• Zoom & navigate: Scroll-wheel zoom, drag zoom without modifier keys (plus a fallback drag box), arrow-key panning for both axes, and a quick ↺ reset button that reapplies the current configuration.
• Round-trip workflow: A dedicated Preview Data button in Chart view reopens the original data preview so you can tweak filters and regenerate charts without re-running commands.
• Stateful experience: VSPlot remembers the last configuration per file and exposes hidden vsplot:test:* commands for automated workflows.
• Export ready: Save charts as high-resolution PNGs directly from the webview.

Works with the formats you already have

Comment markers: #, %, and // are ignored by default. Provide custom markers or disable filtering through the API.

Smart parsing extras

• Consistency scoring picks the delimiter with the richest, most stable column layout (see Delimiter Detection).
• Mixed whitespace, BOM headers, and uneven rows are handled gracefully; malformed lines trigger friendly error toasts.
• API consumers can override delimiter and comment options via parseDataFile(uri, { delimiter, commentMarkers }).

Fine-tune the experience

Commands at a glance

Access commands via the Explorer context menu, the editor title bar, or the Command Palette (⇧⌘P / Ctrl+Shift+P).

Try it with bundled sample data

• sample-data/ includes CSV, JSON, DAT, TSV, and time-series examples generated by scripts/setup-test-data.sh.
• test-data/ holds fixtures for delimiter detection and comment handling — perfect for validating parser changes or demos showing resilience.

Docs & resources

• Webview architecture — how providers load HTML templates and inject nonces.
• Delimiter detection — scoring algorithm and override flow.
• Comment handling — default markers and API hooks.
• Testing coverage — suites for parsing, edge cases, and extension automation.

Need help or have a request? Open an issue or start a discussion in the repository.

Release notes & contributing

• Track releases in CHANGELOG.md.
• Contributions are welcome! Please read CONTRIBUTING.md for setup, coding standards, and release flow.

Privacy

VSPlot does not collect telemetry. All parsing and visualization runs locally within your VS Code session.

Developers

Clone the repo, install dependencies, and compile the extension:

npm install
npm run compile

Run the extension in the VS Code Extension Development Host (press F5), or execute the automated test suite:

npm test

Before packaging, refresh Chart.js bundles with npm run copy-vendor to ensure the webviews ship the latest vendor files.

Works best with Caligo

VSPlot is designed to look its best with Caligo — a professional dark-theme collection for VS Code built on OKLCH color science. Caligo ships 50 perceptually uniform themes (10 seed palettes × 5 harmony modes) with semantic highlighting, APCA-validated contrast, and mathematically harmonious colors that keep your editor — and your data previews — easy on the eyes.

code --install-extension AnselmHahn.caligo-vscode-theme

Install from Marketplace · Live Gallery · GitHub