---
title: "Pie, Donut, Radar and Gauge Charts in JavaScript"
description: "Pie chart and donut chart, radar chart, radial bar, polar area, gauge with plot bands, funnel and pyramid. One scaling SVG, so every one is responsive."
source: https://lemonadejs.com/charts/docs/pie-radial/
---

# Pie, donut, radar and gauge charts

A pie chart, a donut chart, a radar chart and a gauge all render as a single
`<svg viewBox>`, and the viewBox scales the scene natively, so the chart is
responsive with no resize observer and no redraw loop. Per-slice paths give
hover states and labels for free.

## Pie chart and donut chart

A pie chart uses the first series; slices come from `{ name, value }` points (or
plain numbers plus `categories` as slice names):

<!--example-->

```js
import Charts from '@lemonadejs/charts';

const series = [{ data: [
    { name: 'Webform', value: 63 }, { name: 'Call', value: 20 },
    { name: 'Email', value: 8 }, { name: 'Webchat', value: 6 },
    { name: 'Other', value: 3 },
] }];

const App = () => html`<div>
    <${Charts} type="pie" series="${series}" labels gridlines="${false}" />
    <${Charts} type="pie" series="${series}" labels gridlines="${false}"
        innerradius="${0.6}" borderradius="${10}" title="Donut" />
</div>`;
```

- `innerradius`: donut hole as a fraction (0–0.9) or percent (10–90).
- `borderradius`: rounds donut segment corners.
- `labels`: percentage labels on slices; label text color adapts to slice
  luminance automatically.
- The `focus` palette (hero + neutral ramp) emphasises the leading slice;
  sort the data descending for best effect.

## Radar

Categories become the spokes; each series is a polygon. Add `area: true`
per chart for filled polygons:

<!--example-->

```js
import Charts from '@lemonadejs/charts';

const App = () => html`<${Charts} type="radar"
    categories="${['Speed', 'Power', 'Range', 'Cost', 'Eco']}"
    series="${[
        { name: 'Model S', data: [8, 9, 7, 4, 8] },
        { name: 'Model 3', data: [7, 7, 8, 8, 9] },
    ]}" legend />`;
```

## Radial bar and polar area

- **radialbar**: each value is a concentric ring (Apple-Watch style).
  With `categories` and multiple series it stacks per category.
- **polararea**: equal-angle slices whose radius encodes the value.

Both take the same `{ name, value }` or numeric data as pie.

## Gauge

A single value on a dial. `ymin`/`ymax` set the scale, and `plotbands`
paint the classic green/amber/red zones:

<!--example-->

```js
import Charts from '@lemonadejs/charts';

const App = () => html`<${Charts} type="gauge" title="Server load"
    series="${[{ name: 'Load', data: [73] }]}"
    ymin="${0}" ymax="${100}" valuesuffix="%"
    plotbands="${[
        { from: 0, to: 60, color: 'rgba(22,163,74,.35)' },
        { from: 60, to: 85, color: 'rgba(245,158,11,.4)' },
        { from: 85, to: 100, color: 'rgba(220,38,38,.4)' },
    ]}" />`;
```

Because `series` is live, a gauge wired to a state is a real-time meter:
assign a new value and the needle moves.

## Funnel and pyramid

Ordered `{ name, value }` stages, widest first (funnel) or narrowest first
(pyramid):

```js
const series = [{ data: [
    { name: 'Visits', value: 1000 }, { name: 'Signups', value: 420 },
    { name: 'Trials', value: 180 }, { name: 'Deals', value: 60 },
] }];
html`<${Charts} type="funnel" series="${series}" labels />`
```