About

HTML tables remain the most accessible data format on the web. Screen readers parse them. Search engines index them. Phones without JavaScript render them. The problem arises when you need a visual representation: raw numbers in a grid communicate poorly compared to a proportional bar or arc. This tool parses your table markup using the browser's native DOMParser, extracts header and cell data into a structured JSON array, then renders a fully responsive SVG chart using computed viewBox coordinates. No external libraries. No server round-trips. The SVG uses preserveAspectRatio to scale fluidly from a 320px phone screen to a 2560px monitor. If you ship the original table alongside the SVG, users on devices that strip scripts or SVG still get the raw data. This is progressive enhancement applied correctly.

Limitations: the parser expects well-formed HTML tables with a <thead> row and at least one numeric column in <tbody>. Merged cells (colspan, rowspan) are flattened. Negative values are supported on bar and column charts but not on pie or donut charts, where absolute values are used. Color assignment is automatic via HSL rotation at 137.5° offsets (the golden angle) to maximize perceptual distance between adjacent segments.

Formulas

The linear scale maps a data value v to a pixel coordinate within the chart area of width w:

x = v − minmax − min × w

For pie and donut charts, each slice angle θ is proportional to the value's share of the total:

θ_i = v_in∑j=1 v_j × 2π

The arc path endpoint is calculated from cumulative angle α and radius r:

x = cx + r ⋅ cos(α), y = cy + r ⋅ sin(α)

The nice-number tick algorithm finds a human-readable step d for approximately n ticks across range R:

d = niceNum(Rn − 1, TRUE)

The golden-angle color rotation for slice i:

hue_i = (i × 137.5) mod 360

Where v = data value, min/max = data range bounds, w = chart width in SVG units, cx/cy = center coordinates, r = radius, R = data range, n = desired tick count.

Reference Data

Chart Type	Best For	Min Rows	Negative Values	Label Position	Axis Support
Horizontal Bar	Comparing categories with long labels	1	Yes (bidirectional)	End of bar	X-axis ticks
Vertical Column	Time series, sequential categories	1	Yes (below baseline)	Above column	Y-axis ticks, X-axis labels
Pie	Part-to-whole (≤ 8 slices)	2	No (absolute values used)	Outside arc	None
Donut	Part-to-whole with center annotation	2	No (absolute values used)	Outside arc	None
SVG viewBox	All types - enables responsive scaling	-	-	-	-
Golden Angle Palette	Color assignment for any count of categories	-	-	-	-
Nice-Number Ticks	Axis tick calculation for bar/column charts	-	-	-	-
DOMParser Extraction	Safe HTML table parsing without eval	-	-	-	-
preserveAspectRatio	Maintains aspect ratio across viewports	-	-	-	-
Progressive Enhancement	Table fallback when SVG/JS unavailable	-	-	-	-
WCAG 2.1 AA	Contrast ratio ≥ 4.5:1 on labels	-	-	-	-
HSL Rotation	137.5° step ensures max color distance	-	-	-	-

Frequently Asked Questions

The parser treats the first <tr> row as the header row regardless. However, for correct semantic parsing the tool expects a <thead> section. If absent, the first row's <td> cells are promoted to column headers. If your table uses </td><th> elements anywhere in the first row, those are detected automatically.

The tool scans each column and classifies it as numeric if more than 50% of its non-empty cells parse to valid numbers via parseFloat. Non-numeric columns are available only as label sources. If you select a non-numeric column as the data column, the tool reports an error and suggests which columns contain chartable data.

A pie chart represents proportional parts of a whole. Negative wedge angles have no geometric meaning in a circular partition. The tool applies Math.abs() to each value and logs a warning toast when negative values are detected. For datasets with negative values, use bar or column charts where a baseline at zero provides directional context.

The generated SVG uses a viewBox attribute (e.g., viewBox='0 0 800 500') with no fixed width or height attributes on the root element. The browser scales the coordinate system to fit the container while preserveAspectRatio='xMidYMid meet' prevents distortion. CSS sets the SVG to width:100% and height:auto.

Merged cells are flattened during parsing. A cell with colspan='3' is treated as a single value assigned to the first spanned column. The remaining two columns receive empty strings for that row. For accurate charting, expand merged cells into individual cells before pasting.

The golden angle (approximately 137.508°) is derived from the golden ratio applied to a full circle: 360° × (1 − 1/φ) ≈ 137.508°. Successive rotations by this angle distribute hues around the HSL wheel with maximum separation regardless of how many categories exist. This avoids the clustering problem of simple equal-division schemes when the number of slices is not known in advance.