Ring chart · Orbex Sonar-DB Design System

Examples

Two and three parts

Inventory

May orders

2,600plt

Code

tsx

import { ChartLegend } from '@orbex/sonar-components/chart-legend'
import { RingChart } from '@orbex/sonar-components/ring-chart'

const inventory = [
  { value: 840, tone: 'danger', label: 'On hold' },
  { value: 1960, tone: 'muted', label: 'Available' },
] as const

const orders = [
  { value: 1420, tone: 'accent', label: 'Shipped' },
  { value: 80, tone: 'strong', label: 'On hold' },
  { value: 1100, tone: 'muted', label: 'Pending' },
] as const

const plt = (value: number) => `${value.toLocaleString('en-US')} plt`

export default function Rings() {
  return (
    <div className="chart-demo" data-shape="rings">
      <figure>
        <figcaption>Inventory</figcaption>
        <RingChart label="Inventory" format={plt} style={{ width: 128 }} segments={[...inventory]} />
        <ChartLegend aria-hidden="true" items={inventory.map(({ label, tone }) => ({ label, tone }))} />
      </figure>
      <figure>
        <figcaption>May orders</figcaption>
        <RingChart label="May orders" format={plt} style={{ width: 160 }} segments={[...orders]}>
          <span className="ring-total">
            <strong>2,600</strong>
            <span>plt</span>
          </span>
        </RingChart>
        <ChartLegend aria-hidden="true" items={orders.map(({ label, tone }) => ({ label, tone }))} />
      </figure>
    </div>
  )
}

Usage

Two or three parts of one whole, never values over time.
Set the width with CSS; the ring scales.
direction="counterclockwise" when the first part’s figure sits on the left, as in Inventory.

Do and don’t

DoParts of a whole, with the figures beside the ring.

Don’tA ring for values over time. Months are a sequence: use a bar or a line.

DoThe alert in danger, the rest in the rest tone.

Don’tEvery part in a strong color: the one that needs attention no longer stands out.

Accessibility

Keyboard

Key	What it does
None	A ring is a picture; the figures beside it carry the values.

Roles and attributes

Element or attribute	What it gives
`role="img" with aria-label`	One name lists every part with its value, written by format.
Content in the hole	Read after the name, when it adds to it, such as a total.

Notes

One name lists every part with its value, written by format.

Use it

Each component is its own entry point with its own stylesheet, so an app loads only what it uses. The tokens and the cascade layers are set once for the app: see Installation.

tsx

import { RingChart } from '@orbex/sonar-components/ring-chart'
import '@orbex/sonar-components/ring-chart.css'

API

Props of RingChart
Prop	Type	Default
`segments` Required The parts of the whole, in order around the ring: each with a label, a value and a chart tone.	`ChartSegment[]`	—
`label` Required What the ring measures, read before its parts: “Inventory”.	`string`	—
`ticks` Ticks around the ring. Fewer read as coarser; the dashboard uses 96.	`number`	`96`
`format` Writes a value for the chart’s accessible name: “On hold 1,420 plt”. Plain numbers when left out.	`(value: number) => string`	—
`direction` Which way the parts run from twelve o’clock. Counterclockwise puts the first part on the left, beside a label set on that side, as in the Inventory card.	`'clockwise' \| 'counterclockwise'`	`'clockwise'`
`children` Content in the hole of the ring, such as the total.	`ReactNode`	—

Also takes every attribute of the native <figure> , except children, and a ref to it.