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

obsidian-charts

GitHub

用于在 Obsidian 中通过 dataviewjs 调用 Chart.js 生成各类数据可视化图表，支持柱状、折线、饼图等类型。

integration/S2B Test Vault/.obsidian/skills/obsidian-charts/SKILL.md s2b-dev/smart-second-brain

Trigger Scenarios

用户需要创建数据可视化图表用户希望将笔记数据转化为图表展示

Install

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

More Options

Non-standard path

npx skills add https://github.com/s2b-dev/smart-second-brain/tree/main/integration/S2B Test Vault/.obsidian/skills/obsidian-charts -g -y

Use without installing

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": "Smart2Brain",
        "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);