refrakt.mdChart
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 %}<figure data-rune="chart">
<meta content="bar" data-field="type">
<meta content="Monthly Revenue" data-field="title">
<meta content="false" data-field="stacked">
<meta content="{"headers":["Month","Revenue","Expenses"],"rows":[["Jan","4200","3100"],["Feb","5100","3400"],["Mar","4800","3200"],["Apr","6200","3800"]]}" data-name="data">
</figure>RevenueExpenses
<figure class="rf-chart" data-rune="chart" data-density="compact">
<figcaption class="rf-chart__title">Monthly Revenue</figcaption>
<div class="rf-chart__container">
<svg viewBox="0 0 600 300" class="rf-chart__svg">
<line x1="50" y1="30" x2="50" y2="260" stroke="var(--rf-color-border)" stroke-width="1"></line>
<line x1="50" y1="260" x2="580" y2="260" stroke="var(--rf-color-border)" stroke-width="1"></line>
<rect x="61.041666666666664" y="104.1935483870968" width="33.125" height="155.8064516129032" style="fill: var(--rf-color-info)" rx="2"></rect>
<rect x="105.20833333333333" y="145" width="33.125" height="115" style="fill: var(--rf-color-success)" rx="2"></rect>
<text x="116.25" y="280" text-anchor="middle" font-size="12" fill="var(--rf-color-muted)">Jan</text>
<rect x="193.54166666666666" y="70.8064516129032" width="33.125" height="189.1935483870968" style="fill: var(--rf-color-info)" rx="2"></rect>
<rect x="237.70833333333331" y="133.8709677419355" width="33.125" height="126.12903225806451" style="fill: var(--rf-color-success)" rx="2"></rect>
<text x="248.75" y="280" text-anchor="middle" font-size="12" fill="var(--rf-color-muted)">Feb</text>
<rect x="326.0416666666667" y="81.93548387096774" width="33.125" height="178.06451612903226" style="fill: var(--rf-color-info)" rx="2"></rect>
<rect x="370.20833333333337" y="141.29032258064518" width="33.125" height="118.70967741935483" style="fill: var(--rf-color-success)" rx="2"></rect>
<text x="381.25" y="280" text-anchor="middle" font-size="12" fill="var(--rf-color-muted)">Mar</text>
<rect x="458.5416666666667" y="30" width="33.125" height="230" style="fill: var(--rf-color-info)" rx="2"></rect>
<rect x="502.70833333333337" y="119.03225806451613" width="33.125" height="140.96774193548387" style="fill: var(--rf-color-success)" rx="2"></rect>
<text x="513.75" y="280" text-anchor="middle" font-size="12" fill="var(--rf-color-muted)">Apr</text>
</svg>
</div>
<div class="rf-chart__legend">
<span class="rf-chart__legend-item">
<span class="rf-chart__legend-color" style="background: var(--rf-color-info);"></span>
Revenue
</span>
<span class="rf-chart__legend-item">
<span class="rf-chart__legend-color" style="background: var(--rf-color-success);"></span>
Expenses
</span>
</div>
</figure>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 %}<figure data-rune="chart">
<meta content="line" data-field="type">
<meta content="User Growth" data-field="title">
<meta content="false" data-field="stacked">
<meta content="{"headers":["Quarter","Users"],"rows":[["Q1 2024","1000"],["Q2 2024","2500"],["Q3 2024","5000"],["Q4 2024","8500"]]}" data-name="data">
</figure><figure class="rf-chart" data-rune="chart" data-density="compact">
<figcaption class="rf-chart__title">User Growth</figcaption>
<div class="rf-chart__container">
<svg viewBox="0 0 600 300" class="rf-chart__svg">
<line x1="50" y1="30" x2="50" y2="260" stroke="var(--rf-color-border)" stroke-width="1"></line>
<line x1="50" y1="260" x2="580" y2="260" stroke="var(--rf-color-border)" stroke-width="1"></line>
<polyline points="116.25,232.94117647058823 248.75,192.35294117647058 381.25,124.70588235294116 513.75,30" fill="none" style="stroke: var(--rf-color-info)" stroke-width="2"></polyline>
<circle cx="116.25" cy="232.94117647058823" r="4" style="fill: var(--rf-color-info)"></circle>
<circle cx="248.75" cy="192.35294117647058" r="4" style="fill: var(--rf-color-info)"></circle>
<circle cx="381.25" cy="124.70588235294116" r="4" style="fill: var(--rf-color-info)"></circle>
<circle cx="513.75" cy="30" r="4" style="fill: var(--rf-color-info)"></circle>
<text x="116.25" y="280" text-anchor="middle" font-size="12" fill="var(--rf-color-muted)">Q1 2024</text>
<text x="248.75" y="280" text-anchor="middle" font-size="12" fill="var(--rf-color-muted)">Q2 2024</text>
<text x="381.25" y="280" text-anchor="middle" font-size="12" fill="var(--rf-color-muted)">Q3 2024</text>
<text x="513.75" y="280" text-anchor="middle" font-size="12" fill="var(--rf-color-muted)">Q4 2024</text>
</svg>
</div>
</figure>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 |