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

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.