Hylograph.Components.Annotation

Package

purescript-hylograph-components

Repository

afcondon/purescript-hylograph-components

Chart annotations — reference lines, shaded regions, text callouts.

Annotations are not a chart: they live as an Array Annotation on the Config of any chart that has continuous x+y axes (ScatterPlot, LinePlot for now — BarChart's categorical x needs a different model). The chart threads its scales through renderAnnotations and splices the result into its own Tree alongside marks.

Every Annotation constructor wraps a record spec. Smart-constructor helpers (hline, vline, hband, vband, callout) produce those records with sensible defaults; callers use record-update syntax to override:

annotations =
  [ HLine ((hline 50.0) { label = Just "target", style = Dashed })
  , HBand (hband 40.0 60.0) { color = Just "#2563eb" }
  , Callout (callout 15.0 45.0 "Q1 spike")
  ]

Layer order inside a chart: annotations render after axes and before marks, so marks draw on top of bands/lines — with one exception: annotation text labels come last so they stay readable over everything else. That's handled inside renderAnnotations.

data Annotation

type HLineSpec = { color :: Maybe String, label :: Maybe String, strokeWidth :: Number, style :: LineStyle, y :: Number }

type VLineSpec = { color :: Maybe String, label :: Maybe String, strokeWidth :: Number, style :: LineStyle, x :: Number }

type HBandSpec = { color :: Maybe String, label :: Maybe String, opacity :: Number, y1 :: Number, y2 :: Number }

type VBandSpec = { color :: Maybe String, label :: Maybe String, opacity :: Number, x1 :: Number, x2 :: Number }

type CalloutSpec = { color :: Maybe String, text :: String, x :: Number, y :: Number }

type ChartContext = { innerHeight :: Number, innerWidth :: Number, theme :: Theme, xScale :: Scale Number Number Continuous, yScale :: Scale Number Number Continuous }

hline :: Number -> HLineSpec

vline :: Number -> VLineSpec

hband :: Number -> Number -> HBandSpec

vband :: Number -> Number -> VBandSpec

callout :: Number -> Number -> String -> CalloutSpec

renderAnnotations :: ChartContext -> Array Annotation -> Tree