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

AttributeTypeDefaultDescription
typestringbarChart type: bar, line, pie, or area
titlestring—Chart title
stackedbooleanfalseStack series values
tick-countnumber5Approximate number of Y-axis ticks (auto picks "nice" round steps)
tick-stepnumber—Explicit unit-span between Y-axis ticks. Overrides tick-count
label-anglestringautoX-axis label rotation: auto rotates -45° when slots are crowded, 0 forces horizontal, or any explicit degree (e.g. "-45", "-90")

Common attributes

All block runes share these attributes for layout and theming.

AttributeTypeDefaultDescription
widthstringcontentPage grid width: content, wide, or full
spacingstring—Vertical spacing: flush, tight, default, loose, or breathe
insetstring—Horizontal padding: flush, tight, default, loose, or breathe
tintstring—Named colour tint from theme configuration
tint-modestringautoColour scheme override: auto, dark, or light
bgstring—Named background preset from theme configuration