Obsidian Charts View Plugin

The plugin supports both external and internal CSV data loading.

Import external CSV (Desktop)

Use the command Charts View: Import data from external CSV file to select and import a file from your local system.

Load internal CSV

To load a CSV file stored within your Obsidian vault, specify the filename in the data field. Note that the data path must be configured in the plugin settings.

Example: Loading multiple CSV files for DualAxes

type: DualAxes
data: DualAxesData.csv, DualAxesData.csv
options:
  xField: 'time'
  yField: ['value', 'count']
  yAxis:
    value:
      min: 0
      label:
        formatter: function formatter(val) { return ''.concat(val, '个'); }
  geometryOptions:
    - geometry: 'column'
    - geometry: 'line'
      lineStyle:
        lineWidth: 2

The plugin provides pre-configured code blocks for various chart types. You can insert these using the command palette with the command Insert Template or Charts View: Insert Template followed by the desired chart type.

Available templates include:

• Word Count: Generates word frequency data.
• Pie: Circular statistical graphic.
• WordCloud: Visualizes text data.
• Treemap: Hierarchical data visualization.
• DualAxes: Charts with two different Y-axes.
• Mix: Combined chart types.
• Bar: Standard bar charts.
• OrganizationTreeGraph: Tree structures.
• Radar: Spider/Radar charts.
• TinyLine: Small sparkline-style charts.
• Dataviewjs Example (Column): Uses DataviewJS to provide data.

To install the plugin manually, copy the following files into your vault's plugin directory:

VaultFolder/.obsidian/plugins/obsidian-chartsview-plugin/

Required files:

• main.js
• styles.css
• manifest.json

mkdir -p .obsidian/plugins/obsidian-chartsview-plugin
cp main.js styles.css manifest.json .obsidian/plugins/obsidian-chartsview-plugin/

The plugin parses YAML configuration to define chart types and data. The data field can be a raw DataType (object/array) or a string prefix indicating a dynamic source:

• CSV Files: Provide a comma-separated list of file paths. Example: data: "file1.csv, file2.csv".
• Word Count: Use the wordcount: prefix followed by a filename or a comma-separated list of filenames (or folders) to aggregate word counts. Example: data: "wordcount: my_note.md".
• DataviewJS: Use the dataviewjs: prefix followed by a DataviewJS code snippet. This allows you to use the dv proxy to fetch data from your vault. Example: data: "dataviewjs: dv.pages().length".

For wordcount:, you can also provide a minWordCount option to filter results.

type: Bar
data: "wordcount: my_note.md"
options:
  minWordCount: 5

The wordCountFilter setting allows you to define a list of words or regex patterns that will be ignored when generating word count charts. By default, it includes common stop words and regex for numbers and Roman numerals to ensure charts focus on meaningful content.

[A-z]{1,2}
[0-9]+
(?=[MDCLXVI])M*(C[MD]|D?C*)(X[CL]|L?X*)(I[XV]|V?I*)
and
are
but
...

You can enable a feature that triggers an Obsidian search when a user clicks on a chart element. This is configured via the enableSearchInteraction option.

Default usage (searches using the field's value):

options:
  enableSearchInteraction: true

Custom usage (specifying field and operator):

options:
  enableSearchInteraction:
    field: 'word'
    operator: 'path'

Supported Operators:

For MultiView or Mix chart types, you can define multiple sub-views using dot notation in your YAML keys to specify options and data for each view.

Example structure:

type: MultiView
options:
  some_global_option: true
data.view1: "data1.csv"
options.view1: 
  option_for_view1: true
data.view2: "data2.csv"
options.view2:
  option_for_view2: true

This allows each view within the multi-view chart to have its own unique data source and configuration.

You can generate chart data dynamically using DataviewJS by prefixing the data field with dataviewjs:.

When using this method, a dv object is made available to your script. This dv object is a proxy for the Dataview API and includes methods such as:

• dv.pages(query): Returns a DataArray of pages matching the query.
• dv.page(path): Returns a single page object.
• dv.query(source): Executes a Dataview query (returns a Promise).
• dv.current(): Returns the current file's data.

Example usage in YAML:

type: Pie
data: "dataviewjs: dv.pages('#tag').length"

The Chart Wizard is a configuration interface that allows you to visually build charts and generate the corresponding YAML code block for Obsidian.

When using the Wizard, you can:

1. Select a Chart Type: Choose from various visualizations like Area, Bar, Pie, WordCloud, etc.
2. Define Data Fields: Specify the field names (keys) for Labels, Values, and Series.
3. Input Data: Provide comma-separated values for your labels and data points.
4. Adjust Value Count: Change the number of value series to support multi-series charts.
5. Preview: See a live rendering of your chart as you modify settings.

Once satisfied, clicking 'Insert Yaml!' will insert a formatted chartsview code block into your editor.

Word Count charts use the wordcount: prefix in the data field to analyze text within your vault. You can target specific files, folders, or the entire vault.

Data Scoping Options:

• Multi files: data: "wordcount:Words,PARA,@Inbox/" (Targets specific files/folders)
• ALL files: data: "wordcount:/" (Targets the entire vault)
• Folder: data: "wordcount:@Inbox/" (Targets a specific folder)

Example Configuration:

type: WordCloud
data: "wordcount:Words"
options:
  wordField: "word"
  weightField: "count"
  colorField: "count"
  wordStyle:
    rotation: 30