ChartSpark

ChartSpark

Turn your Obsidian notes into interactive charts in seconds. Place your cursor inside any table, checkbox list, or key:value block — press a shortcut — and a live, auto-refreshing chart is inserted directly into your note.

Screenshots

Features

• Six chart types — Bar, Line, Pie, Doughnut, Radar, Polar Area
• Smart table support — column picker lets you choose which column is the category axis and which columns are the value series
• Axis swap — transpose the data matrix with one click (rows ↔ columns)
• Horizontal bar — toggle any bar chart to horizontal orientation
• Multi-block picker — when a note has multiple data blocks, a picker shows previews of each so you select exactly what to chart
• Live auto-refresh — charts update in real time as you edit the source data; each chart tracks its own source block by ID, so multiple charts in the same note refresh independently
• Versatile parsing — handles booleans (true/false), currency ($1,200), percentages (42%), yes/no, and mixed tables; strips trailing empty columns automatically
• Delete button — hover any chart to reveal a × button that removes the block in one click
• Vault scan — aggregate checkbox data across your entire vault or a folder into a single chart
• PNG export — download any chart as an image
• Theme-aware — adapts to Obsidian's light and dark themes via CSS variables

Supported input formats

Tables can contain numbers, booleans (true/false, yes/no), currency, or percentages — any column whose values can be converted to a number is offered as a value series.

Usage

Generating a chart

1. Press Cmd/Ctrl + Shift + C (or right-click anywhere in the editor → Generate chart from this note)
2. If the note has multiple data blocks, a picker appears — click the one you want
3. For tables, choose the label column (category axis) and value columns (series)
4. Use ⇄ Swap axes to transpose rows and columns
5. Select a chart type from the tabs; use ↔ H-Bar for horizontal bars
6. Click Insert chart — a chartspark block is inserted directly below the source data

Auto-refresh

Charts re-render automatically when the source data changes. Each chart stores a unique ID and scans backwards from its own position to find its source block — so editing one table only refreshes the chart that belongs to it.

Manual refresh

Enable Show refresh button in settings to display a ↻ Refresh button on each chart.

Deleting a chart

Hover over any chart and click the × button in the top-left corner.

Manual chart block

Charts are stored as standard fenced code blocks and can be written or edited by hand:

```chartspark
{
  "type": "bar",
  "data": {
    "labels": ["Q1", "Q2", "Q3", "Q4"],
    "datasets": [{"label": "Revenue", "data": [120, 95, 140, 180]}]
  }
}
```

Any valid Chart.js configuration can be placed in the data and options fields.

Commands

Settings

Installation

From the Obsidian community plugin list

1. Open Settings → Community plugins → Browse
2. Search for ChartSpark
3. Click Install, then Enable

Manual installation

1. Download main.js, manifest.json, and styles.css from the latest release
2. Copy them to <Vault>/.obsidian/plugins/chartspark/
3. Reload Obsidian and enable ChartSpark in Settings → Community plugins

Development

npm install
npm run dev      # watch mode with hot reload
npm run build    # production build
npm test         # run unit test suite

License

MIT