Chart Generator

Chart Generator is a fully client-side data visualisation tool — nothing is uploaded to a server, and no account is required. It supports 9 chart types: Bar, Horizontal Bar, Line, Area (filled line), Pie, Doughnut, Radar, Polar Area, and Scatter. You can create single-dataset charts for simple comparisons or multi-dataset charts for side-by-side series.

Data can be entered manually, imported from a CSV file (paste or upload), or pasted as JSON — including Chart.js native format, plain arrays, key-value objects, and arrays of objects with automatic column detection. Charts update live as you change any setting. When you're ready, download your chart as PNG, JPEG, SVG, or PDF with a single click.

1. Pick a chart type in the Type tab. Click "Load Sample Data" to instantly see matching example data for that chart type.
2. Add your data in the Data tab — three options:
   • Manual entry: type comma-separated labels and values directly into the text fields.
   • Import CSV: paste CSV text or upload a .csv file. First column = labels, remaining columns = datasets.
   • Import JSON: paste JSON in any of the supported formats (Chart.js native, [{label,value}], {"key":number}, or a plain number array). The tool detects the format automatically.
3. Style your chart in the Style tab — set title, choose a colour palette, configure legend position and size, set X/Y axis labels, toggle grid lines, smooth lines, and stacking.
4. Download using the PNG, JPEG, SVG, or PDF buttons on the right panel. All formats include the dark background.

For scatter plots, enter one x, y pair per line in the dataset values field, or import JSON with [{"x":1,"y":2},…] format.

Rendering is handled by Chart.js 4. The Alpine.js component stores all configuration in reactive state and computes a single chartConfigKey string by JSON-serialising every field. A single $watch on this key fires a 180 ms debounced rebuild — so the chart only re-draws after the user stops typing, preventing unnecessary redraws mid-keystroke.

JSON import follows a detection cascade: (1) Chart.js native { labels, datasets } shape, (2) plain key-value object, (3) flat number array, (4) array of { x, y } scatter points, (5) array of mixed objects — numeric columns become datasets, the first string-valued column (or a known label key like month, name, category) becomes the labels. This handles most real-world API responses without any schema declaration.

Chart type mapping: Horizontal Bar maps to Chart.js bar with indexAxis: 'y'; Area maps to line with fill: true per dataset. Pie/doughnut charts apply one colour per label across all datasets. PDFs are produced with jsPDF by drawing the rasterised canvas onto an auto-rotated A4 page.