Histogram

histogramBlock elementGraph

A bar chart rendered inside a diagram using pre-binned data. Each bar spans between adjacent bin edges with a height equal to its value. Supports multiple colours, vertical or horizontal orientation, and optional count labels.

Attributes

valuesRequiredImplicit

number-list

Comma-separated bar heights/counts, one per bin. e.g. 5, 12, 8The head shorthand supplies it: histogram:value

binsRequired

number-list

Comma-separated bin edges. Must have one more value than 'values'. e.g. 0, 10, 20, 30

colours

colour-list

Also written: colors, colour, colorColour for each bar. If fewer colours than bars are given, the first colour is used as a fallback for all remaining bars.

Defaultblue

orientation

histogram-orientation

Bar direction. 'vertical' grows upward from the x-axis; 'horizontal' grows rightward from the y-axis.

Defaultvertical

show-labels

boolean

When true, renders the numeric value above each bar (or to its right for horizontal orientation).

Defaultfalse

label

rich-text

Text drawn beside the element — rich text, so `$maths$` and inline formatting render. Fades and draws with the element.

hidden

boolean

Declared but not drawn. Animatable — `hidden: true !cue.to{false}(at: 2)` reveals it — and unlike a `cue`, a hidden element still frames the plot, so the axes do not jump when it appears.

Defaultfalse

lock

boolean

Also written: lockedKeeps the reader from editing this element on an `editable:` graph. Nothing at all on a graph that is not editable.

Defaultfalse

text-size

Text size.

Default20

parametised-number

Stacking order. Higher z renders on top; when omitted or equal, elements stack in document order (later on top).

Allowed in

canvas.graph { }cue { }cue.draw { }cue.trace { }cue.highlight { }cue.spotlight { }

Examples

histogram(
    bins: 0, 10, 20, 30, 40
    values: 5, 12, 8, 3
    colour: teal
)

histogram(
    bins: 0, 10, 20, 30
    values: 4, 9, 6
    colours: red, green, blue
    show-labels: true
)

histogram(
    bins: 0, 5, 10, 15
    values: 3, 7, 2
    orientation: horizontal
    colour: purple
)

Histogram

histogramBlock elementGraph

Attributes

valuesRequiredImplicit

number-list

Comma-separated bar heights/counts, one per bin. e.g. 5, 12, 8The head shorthand supplies it: histogram:value

binsRequired

number-list

Comma-separated bin edges. Must have one more value than 'values'. e.g. 0, 10, 20, 30

colours

colour-list

Also written: colors, colour, colorColour for each bar. If fewer colours than bars are given, the first colour is used as a fallback for all remaining bars.

Defaultblue

orientation

histogram-orientation

Bar direction. 'vertical' grows upward from the x-axis; 'horizontal' grows rightward from the y-axis.

Defaultvertical

show-labels

boolean

When true, renders the numeric value above each bar (or to its right for horizontal orientation).

Defaultfalse

label

rich-text

Text drawn beside the element — rich text, so `$maths$` and inline formatting render. Fades and draws with the element.

hidden

boolean

Declared but not drawn. Animatable — `hidden: true !cue.to{false}(at: 2)` reveals it — and unlike a `cue`, a hidden element still frames the plot, so the axes do not jump when it appears.

Defaultfalse

lock

boolean

Also written: lockedKeeps the reader from editing this element on an `editable:` graph. Nothing at all on a graph that is not editable.

Defaultfalse

text-size

Text size.

Default20

parametised-number

Stacking order. Higher z renders on top; when omitted or equal, elements stack in document order (later on top).

Allowed in

canvas.graph { }cue { }cue.draw { }cue.trace { }cue.highlight { }cue.spotlight { }

Examples

histogram(
    bins: 0, 10, 20, 30, 40
    values: 5, 12, 8, 3
    colour: teal
)

histogram(
    bins: 0, 10, 20, 30
    values: 4, 9, 6
    colours: red, green, blue
    show-labels: true
)

histogram(
    bins: 0, 5, 10, 15
    values: 3, 7, 2
    orientation: horizontal
    colour: purple
)