I Built a Free Browser-Based Chart Builder and Report Creator — Here's How It Works

#javascript #datascience #webdev #opensource

Ever needed a quick chart for a presentation, a report for a course, or a clean visualization for a blog post — but didn't want to sign up for yet another SaaS tool?

I built Chartz to solve exactly that.

🔗 Live app: chartz.vercel.app

What is Chartz?

Chartz is a free, single-page web app where you can import data, create fully customizable charts, and build professional reports — all inside your browser. No accounts, no cloud, no data leaves your machine.

Features

📁 Data Import & Analysis

Upload CSV, Excel, or PDF files
Auto-detection of column types (text, number, date, boolean)
Built-in data cleaning, filtering, and transformation tools
Smart statistical insights — mean, median, distribution, outliers

📊 Chart Builder

15+ chart types: bar, line, pie, area, radar, scatter, radial, treemap, funnel, composed, and more
50+ color palettes — from professional blues to vibrant gradients
Full control over titles, subtitles, legends, grid, tooltips, and animations
Pre-built templates to get started in seconds
Export to PNG, SVG, or PDF, or copy straight to clipboard

📝 Report Builder

Drag-and-drop editor with rich text, charts, images, dividers, and spacers
Resize any block from any edge — full control over layout
Multi-page support with per-page background colors
Rich text editing with headings, bold, italic, lists, alignment, and colors
One-click PDF export of the entire report

🔒 Privacy First

Everything is stored in your browser's local storage. Your data, your charts, your reports — none of it ever leaves your machine. There are no accounts, no tracking, and no servers involved beyond serving the static app.

The Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router, Turbopack)
Styling	Tailwind CSS v4 + shadcn/ui
Charts	Recharts
Drag & Drop	@dnd-kit
Rich Text	Custom editor with inline formatting
Export	html2canvas-pro for PNG, native SVG, jsPDF for PDF
State	Zustand with localStorage persistence
Parsing	PapaParse (CSV), SheetJS (Excel), pdf.js (PDF)
Fonts	Inter + JetBrains Mono

How It Works Under the Hood

The app is structured around three main views that share a common data layer:

Data Studio — Parses uploaded files into a normalized dataset (columns + rows). The parser auto-detects types by sampling values. Cleaning and transform operations are non-destructive — they create new columns rather than overwriting originals.
Chart Builder — Takes a dataset reference and an axis mapping (which columns → X, Y, groupBy). The renderer is a wrapper around Recharts that dynamically switches between chart components based on type. Style config (colors, legend position, grid, animation) is stored as a flat object and merged with palette defaults.
Report Builder — A page-based canvas where each element has a type (text, chart, image, divider, spacer), position order, and size (width %, height px). Drag-and-drop reordering uses @dnd-kit's sortable preset. The PDF export walks each page, renders it to canvas via html2canvas-pro, and stitches pages into a jsPDF document.

State management is entirely client-side with Zustand. Three stores (useDataStore, useChartStore, useReportStore) are persisted to localStorage independently, so your work survives page refreshes.

Responsive Design

The app works on both desktop and mobile:

Desktop: Side panels for chart config and report element insertion
Mobile: Bottom sheet for chart config, floating action button for report elements, bottom tab navigation

The mobile bottom sheet collapses to a drag-handle bar showing tab labels, and expands to 45vh when tapped — keeping the chart preview always visible above.