> ## Documentation Index
> Fetch the complete documentation index at: https://docs.autype.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Charts

> Create bar, line, pie, doughnut, radar, polar area, scatter, and bubble charts with the chart directive.

Autype supports 8 chart types using the `:::chart` directive. Charts are rendered as images in the exported document.

## Basic syntax

```markdown theme={null}
:::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

```markdown theme={null}
:::chart{type="bar" title="Monthly Sales"}
labels: Jan, Feb, Mar, Apr, May, Jun
dataset: Sales | 120, 150, 180, 140, 200, 220
:::
```

### Line chart

```markdown theme={null}
:::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

```markdown theme={null}
:::chart{type="pie" title="Market Share"}
labels: Product A, Product B, Product C, Others
dataset: Share | 35, 25, 20, 20
:::
```

<Note>
  Pie, doughnut, and polar area charts automatically assign colors from a built-in palette if no colors are specified.
</Note>

### Doughnut chart

```markdown theme={null}
:::chart{type="doughnut" title="Budget Distribution"}
labels: Development, Marketing, Operations, Support
dataset: Budget | 40, 25, 20, 15
:::
```

### Radar chart

```markdown theme={null}
:::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

```markdown theme={null}
:::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:

```markdown theme={null}
:::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:

```markdown theme={null}
:::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:`:

```markdown theme={null}
:::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

```markdown theme={null}
:::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:

```markdown theme={null}
:::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:

```markdown theme={null}
:::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:

```markdown theme={null}
:::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:

```markdown theme={null}
:::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](/getting-started/editor/sidebar-styles#figure-captions). Charts share the same figure caption style as images.

### Anchors for cross-references

Add an `anchor` attribute to reference the chart from elsewhere:

```markdown theme={null}
:::chart{type="bar" anchor="chart-sales" caption="Sales 2024"}
labels: Q1, Q2, Q3, Q4
dataset: Sales | 100, 150, 200, 175 | #3b82f6
:::
```

Then reference it:

```markdown theme={null}
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` |