Agent Skills › s2b-dev/smart-second-brain › obsidian-charts

obsidian-charts

GitHub

在 Obsidian 中利用 dataviewjs 和 Chart.js 将笔记数据转化为柱状图、折线图等可视化图表。支持多种图表类型及主题色适配，帮助用户直观展示数据趋势与对比。

src/skills/integrations/obsidian-charts/SKILL.md s2b-dev/smart-second-brain

触发场景

用户请求生成数据可视化图表需要从笔记中提取数据并绘制统计图形

安装

npx skills add s2b-dev/smart-second-brain --skill obsidian-charts -g -y

更多选项

非标准路径

npx skills add https://github.com/s2b-dev/smart-second-brain/tree/main/src/skills/integrations/obsidian-charts -g -y

不安装直接使用

npx skills use s2b-dev/smart-second-brain@obsidian-charts

指定 Agent (Claude Code)

npx skills add s2b-dev/smart-second-brain --skill obsidian-charts -a claude-code -g -y

安装 repo 全部 skill

npx skills add s2b-dev/smart-second-brain --all -g -y

预览 repo 内 skill

npx skills add s2b-dev/smart-second-brain --list

SKILL.md

Frontmatter

{
    "name": "obsidian-charts",
    "license": "MIT",
    "metadata": {
        "author": "S2B",
        "version": "1.0",
        "linkedPlugin": "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.",
    "compatibility": "Requires Obsidian Charts plugin and Dataview plugin to be installed and enabled"
}

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:

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

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

Example: Bar Chart

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);