Chart.js

Embed interactive charts in your documents using Chart.js JSON configuration. 8 chart types supported.

Overview

Chart.js support lets you embed interactive, responsive charts directly in your documents. Charts are defined using a JSON configuration block and rendered on the client side with full interactivity, including hover tooltips.

Important

Inserting Chart.js charts in the editor requires a Pro plan. Documents that already contain charts render them on all plans.

Create a chart by using a fenced code block with the chart, chartjs, or chart.js language identifier. The content must be valid JSON matching the Chart.js configuration schema.

Bar Chart

markdown

```chart
{
  "type": "bar",
  "data": {
    "labels": ["Q1", "Q2", "Q3", "Q4"],
    "datasets": [{
      "label": "Revenue",
      "data": [12000, 19000, 15000, 22000],
      "backgroundColor": ["#6366f1", "#8b5cf6", "#a78bfa", "#c4b5fd"]
    }]
  }
}
```

Line Chart

Use tension for curved lines and fill to shade the area below.

markdown

```chart
{
  "type": "line",
  "data": {
    "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    "datasets": [{
      "label": "Active Users",
      "data": [1200, 1900, 2400, 2800, 3200, 4100],
      "borderColor": "#8b5cf6",
      "tension": 0.3,
      "fill": false,
      "pointRadius": 4
    }]
  },
  "options": {
    "responsive": true,
    "plugins": {
      "legend": { "position": "top" }
    }
  }
}
```

Pie Chart

markdown

```chart
{
  "type": "pie",
  "data": {
    "labels": ["Google Docs", "Word", "Slack", "Email", "Other"],
    "datasets": [{
      "data": [35, 25, 20, 15, 5],
      "backgroundColor": ["#8b5cf6", "#3b82f6", "#10b981", "#f59e0b", "#6b7280"]
    }]
  }
}
```

Doughnut Chart

Similar to pie charts but with a hollow center. Uses the same data format with "type": "doughnut".

markdown

```chart
{
  "type": "doughnut",
  "data": {
    "labels": ["Templates", "Publishing", "API", "AI Actions"],
    "datasets": [{
      "data": [62, 7, 11, 12],
      "backgroundColor": ["#8b5cf6", "#3b82f6", "#10b981", "#f59e0b"]
    }]
  }
}
```

Radar Chart

Radar charts compare multiple data points on axes radiating from a center point.

markdown

```chart
{
  "type": "radar",
  "data": {
    "labels": ["Speed", "Reliability", "Features", "Support", "Price"],
    "datasets": [{
      "label": "Product A",
      "data": [90, 85, 70, 60, 80],
      "borderColor": "#8b5cf6",
      "backgroundColor": "rgba(139, 92, 246, 0.2)"
    }, {
      "label": "Product B",
      "data": [65, 90, 85, 80, 70],
      "borderColor": "#3b82f6",
      "backgroundColor": "rgba(59, 130, 246, 0.2)"
    }]
  }
}
```

Polar Area Chart

Like pie charts, but each segment has the same angle. The radius represents the data value.

markdown

```chart
{
  "type": "polarArea",
  "data": {
    "labels": ["Writing", "Templates", "Publishing", "API", "AI"],
    "datasets": [{
      "data": [11, 4, 7, 12, 2],
      "backgroundColor": [
        "rgba(139, 92, 246, 0.6)",
        "rgba(59, 130, 246, 0.6)",
        "rgba(16, 185, 129, 0.6)",
        "rgba(245, 158, 11, 0.6)",
        "rgba(239, 68, 68, 0.6)"
      ]
    }]
  }
}
```

Scatter Chart

Scatter charts plot data points using x/y coordinates instead of labels.

markdown

```chart
{
  "type": "scatter",
  "data": {
    "datasets": [{
      "label": "Response Time vs Document Size",
      "data": [
        { "x": 10, "y": 50 },
        { "x": 25, "y": 80 },
        { "x": 50, "y": 120 },
        { "x": 75, "y": 180 },
        { "x": 100, "y": 250 }
      ],
      "backgroundColor": "#8b5cf6"
    }]
  },
  "options": {
    "scales": {
      "x": { "title": { "display": true, "text": "Document Size (KB)" } },
      "y": { "title": { "display": true, "text": "Response Time (ms)" } }
    }
  }
}
```

Mixed Chart

Combine chart types on the same axes by setting a type per dataset. The top-level type serves as the default.

markdown

```chart
{
  "type": "bar",
  "data": {
    "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    "datasets": [{
      "label": "Documents Created",
      "data": [120, 190, 240, 280, 320, 410],
      "backgroundColor": "rgba(139, 92, 246, 0.5)",
      "borderColor": "#8b5cf6",
      "borderWidth": 1
    }, {
      "type": "line",
      "label": "Trend",
      "data": [130, 180, 230, 270, 310, 400],
      "borderColor": "#f59e0b",
      "tension": 0.3,
      "fill": false,
      "pointRadius": 3
    }]
  }
}
```

Configuration Options

The options object controls scales, plugins, legend, title, and tooltips. Common configuration:

options.responsive: Charts resize with their container (default: true)
options.plugins.legend.position: Legend placement (top, bottom, left, right)
options.plugins.title: Chart title (display, text, font)
options.scales.x / options.scales.y: Axis configuration (title, min, max, ticks)

Tip

Charts automatically resize to fit their container. Set explicit dimensions in the options object if you need a fixed aspect ratio.

Template Theming

Chart colors are not automatically themed. Specify your colors explicitly in the dataset configuration using backgroundColor and borderColor. Charts render against the template background color, so choose colors with sufficient contrast.

Graphviz Diagrams Math (KaTeX)