Radial bars ​

One ring per category, the value being an angle: bars with orientation: 'horizontal' on polar axes, in a system that covers 270 degrees.

ts
import {
  d3pAutoInteractionArea, D3PAxis, D3PAxisDomain, D3PBarRenderer, D3PChart, d3pDomTooltip, D3PPolarSystem,
  D3PSeries, D3PTooltip, getGlobalBus,
} from 'd3pict'

const bus = getGlobalBus()

const container = document.getElementById('app')! // any element with a size: the chart fills it

const rings: [string, number][] = [['Move', 82], ['Exercise', 64], ['Stand', 91], ['Sleep', 47]]
const categories = rings.map((c) => c[0])
// the polar system sets the part of the circle (sweep), where it starts, and the hole
const system = new D3PPolarSystem({ bus, props: { startAngle: 0, sweep: 270, innerRadius: 0.2, padding: 30 } })
const track = new D3PSeries({ bus, name: 'track', data: categories.map((c) => [c, 100]) })
const value = new D3PSeries({ bus, name: 'value', data: rings })

const dpercent = new D3PAxisDomain({ bus, domain: [0, 100] })
const dcategory = new D3PAxisDomain({ bus, domain: [...categories].reverse() })
const percent = new D3PAxis({ bus, name: 'percent', domain: dpercent, position: 'angle', props: { tickCount: 4 } })
const category = new D3PAxis({ bus, name: 'category', domain: dcategory, position: 'radius', scaleType: 'band' })
// `horizontal`: the category is on the radius, the value on the angle
const background = new D3PBarRenderer({ bus, series: track, name: 'track', props: { orientation: 'horizontal', style: { color: '#e6e6e6', barWidth: 0.85 } } })
const bars = new D3PBarRenderer({ bus, series: value, name: 'value', props: { orientation: 'horizontal', style: { color: '#4e79a7', barWidth: 0.85 } } })

const tooltip = new D3PTooltip({ bus, series: [bars] }) // the track is background, not data
const objects = [system, percent, category, background, bars, tooltip]

const chart = new D3PChart({ container, bus })
const stopArea = d3pAutoInteractionArea(chart) // before the objects: the cursor, the tooltip and the tools ask for an interaction area
objects.forEach((o) => o.addToChart(chart))
const stopTooltip = d3pDomTooltip(tooltip)

All the chart types · how each type is built