// 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.
Create, read, update, and query tasks managed by the TaskNotes plugin. Use when the user asks about their tasks, todos, due dates, priorities, projects, scheduling, time tracking, or recurring tasks.
Run integration tests against a live Obsidian vault using the obsidian CLI. Use for: verifying plugin behavior end-to-end, checking DOM state after commands, asserting no runtime errors, creating/reading/deleting test fixtures in the vault, taking screenshots, inspecting console output. Do NOT use for unit tests or mocked environments.
Work with Obsidian Bases for structured data and database-like views. Use when user asks about creating bases, defining schemas, filtering data, or working with structured note collections.
Work with Obsidian Canvas files for visual note-taking and concept mapping. Use when user asks about creating, editing, or understanding canvas files, nodes, connections, or visual layouts.
Query and analyze notes using Dataview DQL language. Use when user needs tables, lists, or data analysis from vault metadata and frontmatter properties. Requires Dataview plugin.
| name | obsidian-charts |
| description | 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. |
| license | MIT |
| compatibility | Requires Obsidian Charts plugin and Dataview plugin to be installed and enabled |
| metadata | {"author":"Smart2Brain","version":"1.0","linkedPlugin":"obsidian-charts"} |
You can create charts using dataviewjs code blocks with the window.renderChart function.
Output a dataviewjs code block that uses window.renderChart.
Important: window.renderChart takes exactly two arguments:
this.container)Use Obsidian CSS variables (e.g., var(--interactive-accent)) for chart colors to match the theme.
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);
bar - Bar charts for comparing valuesline - Line charts for trends over timepie - Pie charts for proportionsdoughnut - Doughnut charts (pie with hole)radar - Radar charts for multi-axis comparisonpolarArea - Polar area chartsThe chat interface will render the chart automatically when you output the code block.