# Obsidian Charts

> Create charts and visualizations from note data using Chart.js via dataviewjs. Use when user wants bar charts, line graphs, pie charts, or any data visualization. Requires Obsidian Charts plugin. Use when this capability is needed.

- Skill: `tomevault-io/obsidian-charts` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/obsidian-charts`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/obsidian-charts/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/obsidian-charts

---


# Charts Integration

You can create charts using `dataviewjs` code blocks with the `window.renderChart` function.

## How to Create Charts

Output a `dataviewjs` code block that uses `window.renderChart`.

**Important**: `window.renderChart` takes exactly two arguments:

1. The chart data object (follows standard Chart.js format: type, data, options)
2. The container element (`this.container`)

Use Obsidian CSS variables (e.g., `var(--interactive-accent)`) for chart colors to match the theme.

## Example: Bar Chart

```dataviewjs
const pages = dv.pages('#games');
const labels = pages.map(p => p.file.name).values;
const data = pages.map(p => p.rating).values;

const accentColor = getComputedStyle(document.body).getPropertyValue('--interactive-accent').trim();
const chartData = {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      label: 'Game Ratings',
      data: data,
      backgroundColor: accentColor,
      borderColor: accentColor
    }]
  }
}
window.renderChart(chartData, this.container);
```

## Supported Chart Types

- `bar` - Bar charts for comparing values
- `line` - Line charts for trends over time
- `pie` - Pie charts for proportions
- `doughnut` - Doughnut charts (pie with hole)
- `radar` - Radar charts for multi-axis comparison
- `polarArea` - Polar area charts

The chat interface will render the chart automatically when you output the code block.

---
> Source: [your-papa/obsidian-Smart2Brain](https://github.com/your-papa/obsidian-Smart2Brain) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-28 -->