Radial chart

The custom element is <hui-radial-chart>.

Overview

Radial bars: one ring per row, the first innermost, each sweeping in proportion to its value, optionally over a muted track. A single row is a progress ring.

Example

Rings on a track

Source

<div style="width:250px"><hui-radial-chart label="Visitors by browser" track center-label="935" center-caption="Visitors" style="height:250px">
  <script type="application/json">{"series":[{"key":"visitors","label":"Visitors"}],"rows":[{"label":"Chrome","visitors":275},{"label":"Safari","visitors":200},{"label":"Firefox","visitors":287},{"label":"Edge","visitors":173}]}</script>
</hui-radial-chart></div>

The Go template that renders it:

<hui-radial-chart label="Visitors by browser" track center-label="{{ .Total }}" center-caption="Visitors" style="height:250px;width:250px">
  <script type="application/json">{{ .Browsers }}</script>
</hui-radial-chart>

API

Attributes16

Attributes
Name	Type	Default	Description
`label`	`string`	`""`	Required. The chart's accessible name, followed by the centre text, and the data table's caption.
`index`	`string`	`"label"`	The row property that names each slice or ring.
`start-angle`	`number`	`90`	Where the first arc starts, in degrees from three o'clock, counter-clockwise - Recharts' convention, so shadcn's values carry over.
`end-angle`	`number`	`-270`	Where a full sweep ends. Below the start angle, the chart runs clockwise.
`inner-radius`	`number`	`0.3`	The hole. Up to 1 a fraction of the room, above 1 pixels.
`outer-radius`	`number`	`1`	The outer edge, the same way.
`max`	`number`	`the largest value`	The value a full sweep stands for.
`track`	`boolean`	`false`	Draws each ring's whole sweep in `--hui-muted` behind its value.
`radius`	`number`	`5`	The corner radius of each ring's ends, in pixels.
`center-label`	`string`	`-`	Large text in the middle - a total. Read after the label as part of the chart's name.
`center-caption`	`string`	`-`	Smaller, muted text beneath it.
`legend`	`boolean`	`false`	A legend of the rows under the chart.
`tooltip`	`"index" \| "item" \| "none"`	`"index"`	The row under the pointer, or no tooltip.
`indicator`	`"dot" \| "line" \| "dashed"`	`"dot"`	The marker beside the tooltip row.
`format`	`string`	`-`	`Intl.NumberFormat` options as JSON.
`locale`	`string`	`the document's lang`	The locale values are formatted in.

Properties16

Properties
Name	Type	Default	Description
`label`	`string`	`as <code>label</code>`	Reflects to the `label` attribute.
`index`	`string`	`as <code>index</code>`	Reflects to the `index` attribute.
`startAngle`	`number`	`as <code>start-angle</code>`	Reflects to the `start-angle` attribute.
`endAngle`	`number`	`as <code>end-angle</code>`	Reflects to the `end-angle` attribute.
`innerRadius`	`number`	`as <code>inner-radius</code>`	Reflects to the `inner-radius` attribute.
`outerRadius`	`number`	`as <code>outer-radius</code>`	Reflects to the `outer-radius` attribute.
`max`	`number`	`as <code>max</code>`	Reflects to the `max` attribute.
`track`	`boolean`	`as <code>track</code>`	Reflects to the `track` attribute.
`radius`	`number`	`as <code>radius</code>`	Reflects to the `radius` attribute.
`centerLabel`	`string`	`as <code>center-label</code>`	Reflects to the `center-label` attribute.
`centerCaption`	`string`	`as <code>center-caption</code>`	Reflects to the `center-caption` attribute.
`legend`	`boolean`	`as <code>legend</code>`	Reflects to the `legend` attribute.
`tooltip`	`"index" \| "item" \| "none"`	`as <code>tooltip</code>`	Reflects to the `tooltip` attribute.
`indicator`	`"dot" \| "line" \| "dashed"`	`as <code>indicator</code>`	Reflects to the `indicator` attribute.
`format`	`string`	`as <code>format</code>`	Reflects to the `format` attribute.
`locale`	`string`	`as <code>locale</code>`	Reflects to the `locale` attribute.

Events1

Events
Name	Description
`hui-chart-focus`	The reader moved to a category, by pointer or keyboard: its position, and the row as the server sent it. It `bubbles` and is `composed`. Announced, never stored: a host can mirror it elsewhere on the page.

Slots1

Slots
Name	Description
`(default)`	One `<script type="application/json">` holding `series` and `rows`. Replacing it, or its text, redraws the chart.

CSS custom properties2

CSS custom properties
Name	Default	Description
`--hui-chart-1 … --hui-chart-5`	`the preset's violet`	Series colours, by position, repeating after the fifth.
`--hui-series-<key>`	`-`	One series' colour, set from the host's stylesheet: `--hui-series-mobile: var(--hui-chart-4)`. A `colour` field in the JSON wins over it.

::part() hooks9

::part() hooks
Name	Description
`figure`	The wrapper carrying `role="figure"` and the name.
`plot`	The `<svg>`, hidden from assistive technology.
`mark`	One slice or ring, with `data-index`.
`track`	A ring's whole sweep, behind its value.
`centre-label`	The text in the middle.
`table`	The visually hidden data table.
`tooltip`	The tooltip, a manual popover.
`legend`	The legend of rows.
`announcer`	The visually hidden live region.

States

One ring against a goal

A single row, with track drawing the rest of the sweep behind it and max saying what a full turn is worth.

One ring against a goal

Source

<div style="width:200px"><hui-radial-chart label="Storage used" track max="100" center-label="72%" center-caption="of 100 GB" style="height:200px">
  <script type="application/json">{"series":[{"key":"used","label":"Used"}],"rows":[{"label":"Used","used":72}]}</script>
</hui-radial-chart></div>

Server-side mechanics

The server writes one row per slice or ring into the element's <script type="application/json"> child, in the order they are drawn: the chart never sorts, so the server decides whether the biggest slice comes first. A row may carry its own colour. Only the first series is drawn. Replacing the child redraws the same element without animating.

Accessibility

The chart is a figure named by its label and the centre text - "Browser share: 935 Visitors" - because the SVG, and so the text drawn in the hole, is hidden from assistive technology. The data is a visually hidden table.
The plot is one tab stop: the arrow keys step the slices or rings with the tooltip following, and a polite live region reads each - "Safari 200".
The first draw sweeps the arcs open over 1500ms after a 400ms pause, as the reference's do; under prefers-reduced-motion: reduce they are simply there.

Keyboard

Keyboard
Keys	Action
`Tab`	Focuses the plot, one stop per chart, and shows the tooltip at the category the keyboard was last on.
`Arrow Right, Arrow Down`	The next category.
`Arrow Left, Arrow Up`	The previous category.
`Home, End`	The first and the last category.
`Escape`	Hides the tooltip; focus stays on the plot.

Gotchas

Without max the largest value is a full turn. Send max when the rings measure progress towards a goal.
Like every chart, it ships in home-ui-charts.js.