Charts - Autype

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
:::

Every chart needs:

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
:::

The format is (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
:::

Figure captions

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
:::

This renders with: Figure 1: Quarterly Revenue 2024 The caption prefix (e.g., "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
:::

Then reference it:

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`

Markup Reference

Documentation Index

​Basic syntax

​Chart types

​Bar chart

​Line chart

​Pie chart

​Doughnut chart

​Radar chart

​Polar area chart

​Multiple datasets

​Dataset syntax

​Multiple colors per dataset

​Simple data syntax

​Scatter charts

​Using dataset syntax

​Using series + point syntax

​Bubble charts

​Figure captions

​Anchors for cross-references

​Attribute reference

​Default color palette

Basic syntax

Chart types

Bar chart

Line chart

Pie chart

Doughnut chart

Radar chart

Polar area chart

Multiple datasets

Dataset syntax

Multiple colors per dataset

Simple data syntax

Scatter charts

Using dataset syntax

Using series + point syntax

Bubble charts

Figure captions

Anchors for cross-references

Attribute reference

Default color palette