@finchart

Appearance

Documentation / @finchart/core / index / AxisBadge

Interface: AxisBadge ​

Defined in: packages/core/src/axis/labels.ts:18

A single label mounted on the axis — this belongs to decorations, not to ticks. Crosshair value boxes and price line labels arrive in this shape.

Why decorations only describe a badge instead of drawing it themselves: when ticks live in the DOM, a box drawn on canvas can't cover that tick. A badge exists precisely to cover a tick, so whoever draws the tick has to draw the badge too — which makes it an input to the label renderer. The color being a resolved value follows the same logic — the decoration that builds the descriptor resolves CSS variables, the renderer doesn't choose them.

Properties ​

axis ​

axis: "x" | "y"

Defined in: packages/core/src/axis/labels.ts:19

back ​

back: string

Defined in: packages/core/src/axis/labels.ts:24

Background color. Always having a background is what distinguishes it from a tick.

color ​

color: string

Defined in: packages/core/src/axis/labels.ts:25

label ​

label: string

Defined in: packages/core/src/axis/labels.ts:22

position ​

position: number

Defined in: packages/core/src/axis/labels.ts:21

Same space as Tick.position (absolute px) — screen x for the x axis, screen y for the y axis.