Gauge ​

A half circle (sweep: 180) with one ring, lowered with shift so that it sits in the middle, and a text annotation at its center.

ts
import {
  D3PAnnotationText, 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 load = 72
// half a circle, starting on the left, lowered so that it sits in the middle of the chart
const system = new D3PPolarSystem({ bus, props: { startAngle: 270, sweep: 180, innerRadius: 0.55, padding: 40, shift: [0, 0.5] } })
const track = new D3PSeries({ bus, name: 'track', data: [['Load', 100]] })
const value = new D3PSeries({ bus, name: 'value', data: [['Load', load]] })

const dpercent = new D3PAxisDomain({ bus, domain: [0, 100] })
const dcategory = new D3PAxisDomain({ bus, domain: ['Load'] })
const percent = new D3PAxis({ bus, name: 'percent', domain: dpercent, position: 'angle', props: { tickCount: 5 } })
const category = new D3PAxis({ bus, name: 'category', domain: dcategory, position: 'radius', scaleType: 'band', props: { tickFormat: () => '' } })
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: '#59a14f', barWidth: 0.85 } } })
const label = new D3PAnnotationText({ bus, at: 'polar', dy: -24, text: `${load} %`, style: { fontSize: 34 } })

const tooltip = new D3PTooltip({ bus, series: [bars] })
const objects = [system, percent, category, background, bars, label, 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