webdevpuneet.com

Related Snippets

93 in Charts category
1–6 of 60

ApexCharts Dark/Light Theme Toggle with PNG, SVG and CSV Export

ApexCharts Likert Survey Stacked Bar Chart

ApexCharts Line Chart with Annotations and Target Lines

ApexCharts Donut Chart with Live Center Total

ApexCharts Sparkline KPI Cards

ApexCharts Gantt Timeline with Range Bars

Polar Area Chart — HTML CSS JS Rose Chart (No Lib)

Polar Area Chart · Charts · Plain HTML, CSS & JS · Live preview

CategoryCharts
TagsSVGData Visualization

Copy & paste

Source Code

<div class="pa-card">
  <div class="pa-head"><h3>Activity by day</h3></div>
  <div class="pa-body">
    <svg class="pa-svg" id="paSvg" viewBox="0 0 200 200" role="img" aria-label="Polar area chart"></svg>
    <ul class="pa-legend" id="paLegend"></ul>
  </div>
  <div class="pa-tip" id="paTip" hidden></div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Equal-angle slices
Every slice spans 1/n of the circle — angle is constant, unlike a pie chart.
Value-driven radius
Each slice's radius encodes its value (value / max × maxRadius).
Reference rings
Concentric rings let the eye judge each slice's value by how far it reaches.
SVG arc-path wedges
Each slice is a real path, so every wedge is independently hoverable.
Correct arc geometry
Starts at twelve o'clock with the large-arc-flag set for wide slices.
Legend with values
Lists every slice with its colour and value.
Cursor tooltips
Hovering a wedge shows its name and value at the pointer.
Data-driven & no library
Draws from a DATA array in plain HTML/CSS/SVG/JS — zero dependencies.

About this UI Snippet

Polar Area Chart — Equal-Angle Slices Whose Radius Encodes the Value

Screenshot of the Polar Area Chart snippet rendered live

A polar area chart — also called a Nightingale rose or coxcomb chart, after Florence Nightingale who popularised it — is a circular chart where every slice takes an *equal* angle but extends to a *different* radius based on its value. It's a striking alternative to a bar chart for cyclical data like days of the week or months, where the circular form reinforces the cycle. This snippet builds it in plain HTML, CSS, SVG, and vanilla JavaScript, with reference rings, a legend, and hover tooltips — no charting library.

Equal angles, value-driven radii

This is the defining difference from a pie chart, and the snippet makes it explicit. In a pie, the *angle* of each slice encodes its value and the radius is constant. In a polar area chart, the *angle* is constant — every slice spans 1/n of the circle — and the *radius* encodes the value (value / max × maxRadius). So a busier day reaches further out while still occupying its fixed angular wedge. Each slice is drawn as an SVG arc-path wedge from the centre out to its value-scaled radius, using the same cos/sin arc math as a pie but with the radius varying per slice.

Reference rings for reading values

Because radius (not angle) carries the meaning, the eye needs concentric reference rings to judge how far each slice extends — the polar equivalent of a bar chart's gridlines. The snippet draws rings at a third, two-thirds, and full radius, so a viewer can estimate each slice's value by which ring it reaches. Without these rings a polar area chart is pretty but hard to read; with them it's quantitative.

Honest arc geometry

Each wedge moves to the centre, lines out to the start of its arc at the slice's radius, sweeps the arc to the end angle, and closes — with the large-arc-flag set correctly for any slice spanning more than half the circle (relevant if you chart few categories). Starting at twelve o'clock (the −90° offset) matches the convention people expect for circular charts.

Legend and tooltips

A legend lists every slice with its colour and value, and hovering a wedge shows its name and value at the cursor via getBoundingClientRect, with one delegated mousemove listener. Because each wedge is its own SVG path, every slice is independently hoverable and could be animated or highlighted.

Data-driven and drop-in

Feed it any array of { name, value, color } and it draws equal-angle, value-radius slices. It's especially suited to cyclical categories (days, months, hours, wind directions), and it's a clear reference for the polar-area construction and how it differs from a pie — the same arc math, applied to radius instead of angle.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA polar area chart renders with seven equal-angle slices reaching different radii by value.
  2. 2
    Read with the ringsUse the concentric reference rings to judge how far each slice extends.
  3. 3
    Hover a sliceSee that slice's name and value in a tooltip.
  4. 4
    Swap in your dataReplace the DATA array with your own { name, value, color } items.
  5. 5
    Best for cyclical dataUse it for days, months, hours, or directions where the circular form reinforces the cycle.
  6. 6
    Wire to an APIFetch your figures, map them into the DATA shape, and call render().

Real-world uses

Common Use Cases

Cyclical activity data
Show activity by day of week or hour of day, where equal-angle slices suit data that loops and slice length carries the value.
Seasonal and monthly patterns
Visualise sales or weather across twelve months as a rose, with reference rings making it easy to judge each month against the others.
Survey category comparison
Compare equal categories where the angle is constant and only the radius changes, unlike a pie chart where angle carries the data.
Wind rose and direction data
Use the classic application, showing magnitude by compass direction, with each slice drawn as an independently hoverable SVG arc path.
Variety on a crowded dashboard
Offer an eye-catching option beside a radar chart or donut chart when a dashboard needs some visual variety.
Related: Stacked Area Chart
See the Stacked Area Chart for a related charts pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

In a pie chart, each slice's angle encodes its value and every slice shares the same radius. In a polar area (Nightingale rose) chart, it's reversed: every slice takes an equal angle (1/n of the circle) and the radius encodes the value, so larger values reach further out. This snippet computes equal angular wedges and scales each wedge's radius to its value.

Because radius carries the meaning, not angle, the viewer needs a scale to judge how far each slice extends — concentric rings are the polar equivalent of a bar chart's gridlines. Without them the chart looks decorative but is hard to read quantitatively; the rings at a third, two-thirds, and full radius let you estimate each slice's value at a glance.

It shines for cyclical categories — days of the week, months, hours of the day, compass directions — where arranging the data in a circle reinforces the natural cycle and lets you spot patterns (a weekend dip, a seasonal peak). For non-cyclical comparison, a bar chart is usually clearer; for part-to-whole, a pie. Use polar area when the cycle is part of the story.

Each wedge is an SVG path: move to the centre, line out to the slice's start angle at its value-scaled radius, sweep an arc to the end angle (same radius), and close. The angles are evenly divided across the circle and offset by −90° to start at twelve o'clock; the large-arc-flag is set for any slice over half the circle. It's the same arc math as a pie, applied with a per-slice radius.

In React, hold the data in useState and render paths/legend from .map() (or run render() in a useEffect with a ref); in Vue, use v-for or a template ref with onMounted; in Angular, *ngFor or ViewChild with ngAfterViewInit. The pt() arc math and radius scaling are framework-agnostic and port unchanged.