Contents
Garden HandbookComponent referencegarden chart

Component reference · chart

Render proportional horizontal bars with a built-in expandable data table underneath.

← Component reference · Usage: chart

1Examples

Code

```garden chart
title: Max Width by Layout Zone
xLabel: Layout Zone
yLabel: Max Width
unit: px
data:
  - x: Prose Column
    y: 740
  - x: Wide Figure Zone
    y: 1040
  - x: Wide Table Zone
    y: 1340
caption: Click "View data table" below to expand the full numeric table.
```

Preview

Max Width by Layout Zone

Show data table
Layout ZoneMax Width
Prose Column740 px
Wide Figure Zone1040 px
Wide Table Zone1340 px
Click "View data table" below to expand the full numeric table.

2Syntax

```garden chart
type:       # optional, bar only
title:      # recommended, heading
data:       # either this or series
  - x:      # name
    y:      # value
    label:  # optional, value label
x:          # labels for series
series:     # either this or data
  - name:   # optional, name
    data:   # numbers
unit:       # optional, unit
xLabel:     # optional, 1st column
yLabel:     # optional, 2nd column
caption:    # optional, caption
```

3Fields

Fence header: ```garden chart (snippet trigger ;gchart). Provide rows via data: [{ x, y, label? }] or column arrays via x + series; invalid YAML or unknown top-level keys report garden-yaml on the block.

FieldRequiredDefaultAllowed Values & LimitsDescription
titleRecommended"Chart" for aria-label (no visible heading)stringHeading above the chart
dataEither data or series[]{ x, y, label? }[] (at least 2 rows and 2 to 8 rows recommended, not checked)Row entries where x is the row label, y is the numeric value, and label defaults to y + unit
seriesEither series or datanone{ name?, data: number[] }[] (at least 2 data points recommended, not checked)Numeric series paired with an x label array (series[0].data is rendered)
xOptional["1", "2", ...] (1-based row numbers)string or string[]Category labels when using series, or first-column header string when xLabel is omitted
typeOptional"bar""bar"Chart type (horizontal bar chart)
unitOptional""stringUnit suffix appended to values when data[].label is omitted
xLabelOptionalstring x or "Item"stringHeader for the first column of the expandable data table
yLabelOptional"Value"stringHeader for the second column of the expandable data table
captionOptionalnonestringCaption below the chart

4Limits & errors

  • Apart from the shared garden-yaml, this component has no error codes of its own; values marked "not checked" in the table never report an error.
Contents