Radar Chart HTML CSS JS — SVG Spider Chart

A radar chart — also called a spider or web chart — plots several metrics around a circle, with each axis radiating from the center and the data joined into a polygon. It is the go-to visualization for comparing multi-dimensional profiles like player stats, product scores or skill ratings. This implementation is built with inline SVG and a little trigonometry, supports two overlaid datasets, animates the fill on load, and lets you drag vertices to edit values live. No charting library is used. Here is the full breakdown.

Placing the axes with polar coordinates

The chart has N axes spread evenly around the center, one per metric, separated by 360 / N degrees. The core of the whole chart is the polar-to-Cartesian conversion. For a given axis index i and a radius r (how far out along that axis), the angle is i * (2*PI / N) measured from straight up, and the point is computed as:

x = cx + r * sin(angle) y = cy - r * cos(angle)

Using sin for x and -cos for y (with the minus because SVG's y-axis points down) places the first axis at the top and walks clockwise. A small helper function takes an axis index and a 0-to-1 value and returns the screen point, scaling the value by the chart's maximum radius. Every line, label and data vertex in the chart is positioned through this one function.

The concentric ring grid

The background grid is a set of concentric polygons rather than circles, so the gridlines mirror the data polygon's shape. For each ring level (say 20%, 40%, 60%, 80%, 100%) the code generates a points string by calling the polar helper for every axis at that fixed radius and joining the coordinates with spaces, then renders an SVG <polygon> with a faint stroke and no fill. Straight axis spokes are drawn as <line> elements from the center to each outermost vertex, and axis labels are positioned just beyond the outer ring, with their text-anchor adjusted based on which side of the chart they fall so labels never overlap the shape.

Building the data polygon

Each dataset is an array of values, one per axis, normalized to 0–1. The data polygon's points attribute is built exactly like a grid ring, but using each axis's actual data value as its radius instead of a fixed level. The resulting <polygon> is given a semi-transparent fill and a solid colored stroke. Small <circle> markers are drawn at each vertex so individual values are easy to read and grab.

Overlaying two datasets

Two datasets are rendered as two separate polygons with different colors and translucent fills layered on the same grid, making side-by-side comparison immediate — for example two players' attribute profiles. Because both use the same polar helper and coordinate system, they align perfectly. A legend maps each color to its label.

Animating the fill-in

On load the polygons animate in using SVG stroke techniques. The outline is drawn with a large stroke-dasharray set to the path length and an initial stroke-dashoffset equal to that length, which hides the stroke; transitioning the offset to zero makes the outline appear to draw itself around the shape. The fill opacity is simultaneously transitioned from zero, so the polygon both traces and fades in. This is the standard SVG line-drawing animation applied to a closed polygon.

Draggable vertices for live editing

The chart is interactive: each data vertex marker responds to pointer events. On press, the code records which dataset and axis the grabbed marker belongs to and sets a dragging reference. On move, it converts the pointer position back from Cartesian into a value along that axis — projecting the pointer's offset from center onto the axis direction and dividing by the max radius — clamps it to 0–1, updates the dataset, and rebuilds the polygon and markers. Releasing clears the drag. Because the rebuild reruns the same polar math, dragging a vertex smoothly reshapes the polygon in real time, effectively turning the chart into an input control. Both mouse and touch end events clear the drag state so it works on phones.

Tooltips and labels

Hovering or focusing a vertex can surface the exact value, implemented either through native SVG <title> elements for built-in tooltips or a positioned label. Axis labels and value rings give the chart context without clutter.

Why SVG over canvas here

SVG is ideal for a radar chart because each element — polygon, line, circle, label — is a real DOM node you can style with CSS, animate with transitions, and attach events to individually for dragging and tooltips. The whole chart is just trigonometry feeding coordinate strings into declarative SVG, which makes it crisp at any resolution, accessible, and easy to extend with more axes or datasets by changing the data arrays.