Annotations ​

Marks tied to values of the axes, so they follow zooms and resizes: a band, a line, a point and text.

ts
import {
  D3PAnnotationBand, D3PAnnotationLine, D3PAnnotationPoint, d3pAutoInteractionArea, D3PAxis, D3PAxisDomain,
  D3PChart, D3PCursorIndicator, d3pDomTooltip, D3PLineRenderer, D3PSeries, D3PTooltip, getGlobalBus,
} from 'd3pict'
// your series data: replace these generators with your own values
import { walk } from './data'

const bus = getGlobalBus()

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

const load = new D3PSeries({ bus, name: 'load', data: walk(3, 40, 60, 22, 20, 95) })
const dx = new D3PAxisDomain({ bus, domain: [0, 39] })
const dy = new D3PAxisDomain({ bus, domain: [0, 100] })
const x = new D3PAxis({ bus, name: 'x', domain: dx })
const y = new D3PAxis({ bus, name: 'y', domain: dy, position: 'left', props: { grid: { enabled: true } } })
const line = new D3PLineRenderer({ bus, series: load, props: { style: { color: '#4e79a7', curve: 'monotone' } } })

// marks tied to values of the axes: they follow zooms and resizes
const deploy = new D3PAnnotationBand({ bus, axis: x, from: 14, to: 20, label: 'deploy', style: { fill: '#4e79a7', opacity: 0.15 } })
const limit = new D3PAnnotationLine({ bus, axis: y, value: 80, label: 'limit', style: { strokeDasharray: '6,4' } })
const peak = load.data.reduce((best, p) => (p[1] > best[1] ? p : best))
const top = new D3PAnnotationPoint({ bus, x: peak[0] as number, y: peak[1], label: `peak ${Math.round(peak[1])}`, radius: 5 })

const cursor = new D3PCursorIndicator({ bus })
const tooltip = new D3PTooltip({ bus })
const objects = [x, y, deploy, line, limit, top, cursor, 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