refrakt.md

Docs

Runes

Themes

Extend

Project

Code & Data›Chart

Chart

Turns a Markdown table into a chart. The first column becomes axis labels, the header row becomes series names, and data cells become values.

Bar chart

The default chart type displays data as vertical bars.

{% chart type="bar" title="Monthly Revenue" %}
| Month | Revenue | Expenses |
|-------|---------|----------|
| Jan   | 4200    | 3100     |
| Feb   | 5100    | 3400     |
| Mar   | 4800    | 3200     |
| Apr   | 6200    | 3800     |
{% /chart %}
<rf-chart data-rune="chart" data-rune-fields="{&quot;type&quot;:&quot;bar&quot;,&quot;stacked&quot;:&quot;false&quot;}">
  <table data-name="data">
    <caption>Monthly Revenue</caption>
    <thead>
      <tr>
        <th>Month</th>
        <th>Revenue</th>
        <th>Expenses</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jan</td>
        <td>4200</td>
        <td>3100</td>
      </tr>
      <tr>
        <td>Feb</td>
        <td>5100</td>
        <td>3400</td>
      </tr>
      <tr>
        <td>Mar</td>
        <td>4800</td>
        <td>3200</td>
      </tr>
      <tr>
        <td>Apr</td>
        <td>6200</td>
        <td>3800</td>
      </tr>
    </tbody>
  </table>
</rf-chart>
Monthly Revenue
MonthRevenueExpenses
Jan42003100
Feb51003400
Mar48003200
Apr62003800
<rf-chart class="rf-chart" data-type="bar" data-stacked="false" data-elevation="sunken" data-rune="chart" data-density="compact">
  <table data-name="data" class="rf-chart__data">
    <caption>Monthly Revenue</caption>
    <thead>
      <tr>
        <th>Month</th>
        <th>Revenue</th>
        <th>Expenses</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jan</td>
        <td>4200</td>
        <td>3100</td>
      </tr>
      <tr>
        <td>Feb</td>
        <td>5100</td>
        <td>3400</td>
      </tr>
      <tr>
        <td>Mar</td>
        <td>4800</td>
        <td>3200</td>
      </tr>
      <tr>
        <td>Apr</td>
        <td>6200</td>
        <td>3800</td>
      </tr>
    </tbody>
  </table>
</rf-chart>

Line chart

Use type="line" for trend data.

{% chart type="line" title="Monthly Active Users" %}
| Month     | Users |
|-----------|-------|
| January   | 1000  |
| February  | 1240  |
| March     | 1580  |
| April     | 1820  |
| May       | 2100  |
| June      | 1950  |
| July      | 1880  |
| August    | 2240  |
| September | 2680  |
| October   | 3120  |
| November  | 2890  |
| December  | 3540  |
{% /chart %}
<rf-chart data-rune="chart" data-rune-fields="{&quot;type&quot;:&quot;line&quot;,&quot;stacked&quot;:&quot;false&quot;}">
  <table data-name="data">
    <caption>Monthly Active Users</caption>
    <thead>
      <tr>
        <th>Month</th>
        <th>Users</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>1000</td>
      </tr>
      <tr>
        <td>February</td>
        <td>1240</td>
      </tr>
      <tr>
        <td>March</td>
        <td>1580</td>
      </tr>
      <tr>
        <td>April</td>
        <td>1820</td>
      </tr>
      <tr>
        <td>May</td>
        <td>2100</td>
      </tr>
      <tr>
        <td>June</td>
        <td>1950</td>
      </tr>
      <tr>
        <td>July</td>
        <td>1880</td>
      </tr>
      <tr>
        <td>August</td>
        <td>2240</td>
      </tr>
      <tr>
        <td>September</td>
        <td>2680</td>
      </tr>
      <tr>
        <td>October</td>
        <td>3120</td>
      </tr>
      <tr>
        <td>November</td>
        <td>2890</td>
      </tr>
      <tr>
        <td>December</td>
        <td>3540</td>
      </tr>
    </tbody>
  </table>
</rf-chart>
Monthly Active Users
MonthUsers
January1000
February1240
March1580
April1820
May2100
June1950
July1880
August2240
September2680
October3120
November2890
December3540
<rf-chart class="rf-chart" data-type="line" data-stacked="false" data-elevation="sunken" data-rune="chart" data-density="compact">
  <table data-name="data" class="rf-chart__data">
    <caption>Monthly Active Users</caption>
    <thead>
      <tr>
        <th>Month</th>
        <th>Users</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>1000</td>
      </tr>
      <tr>
        <td>February</td>
        <td>1240</td>
      </tr>
      <tr>
        <td>March</td>
        <td>1580</td>
      </tr>
      <tr>
        <td>April</td>
        <td>1820</td>
      </tr>
      <tr>
        <td>May</td>
        <td>2100</td>
      </tr>
      <tr>
        <td>June</td>
        <td>1950</td>
      </tr>
      <tr>
        <td>July</td>
        <td>1880</td>
      </tr>
      <tr>
        <td>August</td>
        <td>2240</td>
      </tr>
      <tr>
        <td>September</td>
        <td>2680</td>
      </tr>
      <tr>
        <td>October</td>
        <td>3120</td>
      </tr>
      <tr>
        <td>November</td>
        <td>2890</td>
      </tr>
      <tr>
        <td>December</td>
        <td>3540</td>
      </tr>
    </tbody>
  </table>
</rf-chart>

Attributes

AttributeTypeRequiredDescription
type"bar" | "line" | "pie" | "area"—Chart visualization type
titlestring—Title displayed above the chart
stackedboolean—Stack data series instead of grouping
tick-countnumber—Approximate number of Y-axis ticks (default 5). Ignored when tick-step is set.
tick-stepnumber—Explicit unit-span between Y-axis ticks (e.g. 10, 0.5). Overrides tick-count.
label-anglestring—X-axis label rotation: "auto" (default) rotates -45° when slots are crowded, "0" forces horizontal, or any explicit degree (e.g. "-45", "-90").

Universal attributes

bg

The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.

AttributeTypeRequiredDescription
bgstring—Background preset applied to this block
bg-fromstring—Gradient start colour — a semantic token name (→ var(--rf-color-*))
bg-gradient"to-t" | "to-b" | "to-l" | "to-r" | "to-tr" | "to-br" | "to-bl" | "to-tl"—Gradient direction (bounded named set)
bg-gradient-type"linear" | "radial" | "conic"—Gradient type
bg-tostring—Gradient end colour — a semantic token name
bg-viastring—Optional middle gradient stop — a semantic token name
scrim"top" | "bottom" | "left" | "right" | "none"—Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim
scrim-blur"none" | "sm" | "md" | "lg"—Frost scrim blur amount
scrim-strength"sm" | "md" | "lg"—Gradient scrim strength
scrim-tone"dark" | "light"—Whether the scrim darkens (for light text) or lightens (for dark text)
scrim-type"gradient" | "frost"—Scrim treatment: gradient (default) or frost (backdrop blur)
elevation

The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.

AttributeTypeRequiredDescription
elevation"sunken" | "flush" | "flat" | "raised" | "floating" | "overlay" | "none" | "sm" | "md" | "lg"—Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases
inset

Internal padding override.

AttributeTypeRequiredDescription
inset"flush" | "tight" | "default" | "loose" | "breathe"—Inner padding of this block
motion

Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.

AttributeTypeRequiredDescription
reveal"none" | "fade" | "slide" | "scale" | "blur"—Scroll-reveal entrance character (none|fade|slide|scale|blur); the theme owns the choreography
staggerboolean—Cascade this block's items in as it reveals (no-op on single-child runes)
spacing

Block-level rhythm override.

AttributeTypeRequiredDescription
spacing"flush" | "tight" | "default" | "loose" | "breathe"—Vertical spacing above and below this block
substrate

Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.

AttributeTypeRequiredDescription
substrate"dots" | "grid" | "lines" | "cross" | "checker" | "none"—Generated surface pattern
substrate-fill"inherit" | "inset"—Surface fill the pattern sits on (full colour stays with tint)
substrate-opacity"sm" | "md" | "lg"—Pattern ink strength
substrate-size"sm" | "md" | "lg"—Pattern cell size
substrate-target"self" | "media"—Which surface the pattern fills (overrides the rune/theme default)
tint

Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.

AttributeTypeRequiredDescription
tintstring—Color tint preset applied to this block
tint-mode"auto" | "dark" | "light"—Whether the tint adapts to auto, dark, or light mode
width

The track a block rune occupies.

AttributeTypeRequiredDescription
width"compact" | "narrow" | "content" | "wide" | "full"—Maximum width constraint for this block
Not availableWhy
dropcap, readingthis rune declares no prose body
framethis rune declares neither a `frameTarget` nor a media section
prominencethis rune has no page-section header