Autype supports 8 chart types using the :::chart directive. Charts are rendered as images in the exported document.
Basic syntax
:::chart{type="bar" title="Monthly Sales"}
labels: Jan, Feb, Mar, Apr, May, Jun
dataset: Sales | 120, 150, 180, 140, 200, 220
:::
- A
type attribute
labels: line (except scatter/bubble charts)- One or more
dataset: lines
Chart types
Bar chart
:::chart{type="bar" title="Monthly Sales"}
labels: Jan, Feb, Mar, Apr, May, Jun
dataset: Sales | 120, 150, 180, 140, 200, 220
:::
Line chart
:::chart{type="line" title="Temperature Trend"}
labels: Mon, Tue, Wed, Thu, Fri, Sat, Sun
dataset: Temperature | 22, 24, 23, 25, 27, 26, 24
:::
Pie chart
:::chart{type="pie" title="Market Share"}
labels: Product A, Product B, Product C, Others
dataset: Share | 35, 25, 20, 20
:::
Pie, doughnut, and polar area charts automatically assign colors from a built-in palette if no colors are specified.
Doughnut chart
:::chart{type="doughnut" title="Budget Distribution"}
labels: Development, Marketing, Operations, Support
dataset: Budget | 40, 25, 20, 15
:::
Radar chart
:::chart{type="radar" title="Skills Assessment"}
labels: JavaScript, Python, SQL, Design, Communication
dataset: Alice | 90, 70, 85, 60, 80 | #3b82f6
dataset: Bob | 75, 85, 70, 90, 65 | #ef4444
:::
Polar area chart
:::chart{type="polarArea" title="Activity Distribution"}
labels: Running, Cycling, Swimming, Hiking
dataset: Hours | 12, 8, 5, 15
:::
Multiple datasets
Add multiple dataset: lines to compare data series:
:::chart{type="bar" title="Quarterly Comparison"}
labels: Q1, Q2, Q3, Q4
dataset: 2023 | 100, 120, 140, 160 | #3b82f6
dataset: 2024 | 110, 135, 155, 180 | #22c55e
:::
Dataset syntax
dataset: Label | value1, value2, value3 | #color
| Part | Required | Description |
|---|
| Label | Optional | Dataset name shown in legend |
| Values | Yes | Comma-separated numbers |
| Color | Optional | Hex color (e.g., #3b82f6) |
Multiple colors per dataset
For pie/doughnut charts, provide comma-separated colors:
:::chart{type="pie" title="Revenue Split"}
labels: Product, Service, Consulting
dataset: Revenue | 50, 30, 20 | #3b82f6, #22c55e, #f59e0b
:::
Simple data syntax
For single-dataset charts, use data: instead of dataset::
:::chart{type="bar" title="Simple Chart"}
labels: A, B, C, D
data: 10, 20, 30, 40
:::
Scatter charts
Scatter charts use coordinate pairs instead of simple values. Labels are not needed.
Using dataset syntax
:::chart{type="scatter" title="Correlation Analysis"}
dataset: Group A | (10,20), (15,25), (20,30), (25,28) | #3b82f6
dataset: Group B | (12,15), (18,22), (22,18), (28,25) | #ef4444
:::
Using series + point syntax
An alternative syntax for scatter charts:
:::chart{type="scatter" title="Data Points"}
series: Measurements | #3b82f6
point: 10, 20
point: 15, 25
point: 20, 30
series: Predictions | #ef4444
point: 12, 22
point: 18, 28
:::
series: starts a new dataset with a label and optional color. point: adds an x,y coordinate to the current series.
Bubble charts
Bubble charts extend scatter charts with a third value for the bubble radius:
:::chart{type="bubble" title="Market Analysis"}
dataset: Products | (10,20,15), (25,30,25), (15,15,10) | #3b82f6
:::
(x, y, radius).
Using series + point syntax:
:::chart{type="bubble" title="Portfolio"}
series: Stocks | #3b82f6
point: 10, 20, 15
point: 25, 30, 25
series: Bonds | #22c55e
point: 5, 10, 8
point: 15, 12, 12
:::
Add a caption attribute for auto-numbering in the List of Figures:
:::chart{type="bar" caption="Quarterly Revenue 2024"}
labels: Q1, Q2, Q3, Q4
dataset: Revenue | 150000, 180000, 220000, 195000 | #3b82f6
:::
"Figure", "Abb.") and styling (font, alignment, color) are configured in your document’s style settings. Charts share the same figure caption style as images.
Anchors for cross-references
Add an anchor attribute to reference the chart from elsewhere:
:::chart{type="bar" anchor="chart-sales" caption="Sales 2024"}
labels: Q1, Q2, Q3, Q4
dataset: Sales | 100, 150, 200, 175 | #3b82f6
:::
As shown in [Figure {num}](#chart-sales), sales grew steadily.
Attribute reference
| Attribute | Values | Description |
|---|
type | bar, line, pie, doughnut, radar, polarArea, scatter, bubble | Chart type (required) |
title | String | Title displayed on the chart |
caption | String | Figure caption for auto-numbering |
anchor | String | Anchor ID for cross-references |
width | Number (pixels) | Chart width |
height | Number (pixels) | Chart height |
align | left, center, right | Horizontal alignment |
showLegend | true, false | Show/hide the legend |
showGrid | true, false | Show/hide grid lines |
Default color palette
When no colors are specified, charts use this built-in palette:
| Index | Color | Hex |
|---|
| 1 | Blue | #3b82f6 |
| 2 | Red | #ef4444 |
| 3 | Green | #22c55e |
| 4 | Amber | #f59e0b |
| 5 | Violet | #8b5cf6 |
| 6 | Cyan | #06b6d4 |
| 7 | Pink | #ec4899 |
| 8 | Orange | #f97316 |
| 9 | Teal | #14b8a6 |
| 10 | Indigo | #6366f1 |
