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="{"type":"bar","stacked":"false"}">
<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>| Month | Revenue | Expenses |
|---|---|---|
| Jan | 4200 | 3100 |
| Feb | 5100 | 3400 |
| Mar | 4800 | 3200 |
| Apr | 6200 | 3800 |
<rf-chart class="rf-chart" data-type="bar" data-stacked="false" 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="User Growth" %}
| Quarter | Users |
|---------|-------|
| Q1 2024 | 1000 |
| Q2 2024 | 2500 |
| Q3 2024 | 5000 |
| Q4 2024 | 8500 |
{% /chart %}<rf-chart data-rune="chart" data-rune-fields="{"type":"line","stacked":"false"}">
<table data-name="data">
<caption>User Growth</caption>
<thead>
<tr>
<th>Quarter</th>
<th>Users</th>
</tr>
</thead>
<tbody>
<tr>
<td>Q1 2024</td>
<td>1000</td>
</tr>
<tr>
<td>Q2 2024</td>
<td>2500</td>
</tr>
<tr>
<td>Q3 2024</td>
<td>5000</td>
</tr>
<tr>
<td>Q4 2024</td>
<td>8500</td>
</tr>
</tbody>
</table>
</rf-chart>| Quarter | Users |
|---|---|
| Q1 2024 | 1000 |
| Q2 2024 | 2500 |
| Q3 2024 | 5000 |
| Q4 2024 | 8500 |
<rf-chart class="rf-chart" data-type="line" data-stacked="false" data-rune="chart" data-density="compact">
<table data-name="data" class="rf-chart__data">
<caption>User Growth</caption>
<thead>
<tr>
<th>Quarter</th>
<th>Users</th>
</tr>
</thead>
<tbody>
<tr>
<td>Q1 2024</td>
<td>1000</td>
</tr>
<tr>
<td>Q2 2024</td>
<td>2500</td>
</tr>
<tr>
<td>Q3 2024</td>
<td>5000</td>
</tr>
<tr>
<td>Q4 2024</td>
<td>8500</td>
</tr>
</tbody>
</table>
</rf-chart>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
type | string | bar | Chart type: bar, line, pie, or area |
title | string | — | Chart title |
stacked | boolean | false | Stack series values |
Common attributes
All block runes share these attributes for layout and theming.
| Attribute | Type | Default | Description |
|---|---|---|---|
width | string | content | Page grid width: content, wide, or full |
spacing | string | — | Vertical spacing: flush, tight, default, loose, or breathe |
inset | string | — | Horizontal padding: flush, tight, default, loose, or breathe |
tint | string | — | Named colour tint from theme configuration |
tint-mode | string | auto | Colour scheme override: auto, dark, or light |
bg | string | — | Named background preset from theme configuration |