Semi-donut ​

A pie in a polar system that covers half a circle, with a hole: D3PPieRenderer and the settings of the D3PPolarSystem (sweep, startAngle, innerRadius).

ts
import {
  d3pAutoInteractionArea, D3PChart, d3pDomLegend, d3pDomTooltip, D3PLegendBundle, D3PPieRenderer,
  D3PPolarSystem, D3PSeries, D3PTooltip, getGlobalBus,
} from 'd3pict'

const bus = getGlobalBus()

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

const seats = new D3PSeries({ bus, name: 'seats', data: [['Left', 142], ['Greens', 58], ['Centre', 96], ['Right', 118], ['Other', 22]] })
// a pie in a polar system covering half a circle, with a hole
const system = new D3PPolarSystem({ bus, props: { startAngle: 270, sweep: 180, innerRadius: 0.5, padding: 20, shift: [0, 0.5] } })
const pie = new D3PPieRenderer({ bus, series: seats, props: { padAngle: 1, cornerRadius: 3 } })

const tooltip = new D3PTooltip({ bus })
const legend = new D3PLegendBundle({ bus })
const objects = [system, pie, tooltip, legend]

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)
const stopLegend = d3pDomLegend(legend)

All the chart types · how each type is built