Contribution Graph - generate heatmap charts to track your activity

Hi guys,

I wrote a plugin named contribution graph, which could generate interactive GitHub-style contribution graphs, month track graphs, and calendar track graphs.

talks is cheap, show images directly

  • default view

  • Month track view

  • Calendar track view

More case you can see at Github Project Site.

Many thanks to the plug-in authors of heatmap calendar and activity history, the inspiration comes from them



Case 1 - render latest days & add click action

a sample show how to render graph

  • find pages which container project tag
  • render latest 365 days range
  • search by date keyword when click cell


// pages 
const data = dv.pages('#project')
	.map(p => {
		return {
			date: p.file.ctime.toFormat('yyyy-MM-dd'),
			value: p
	.groupBy(p => // group by date
	.map(entry =>{ 
		// convert to contribution graph data
		return {
			date: entry.key,
			value: entry.rows.length
const options = {
    days: 365,
    title: 'Contributions in the last 365 days ', // graph title
    data: data,
    onCellClick: (item) => {
        // call global-search by cell's date
	    const key = `["tags":project] ["createTime":${}]`

// render graph by  data
renderContributionGraph(this.container, options )


Hi everyone, I have released a new version 0.4.0 today

Release 0.4.0 · vran-dev/obsidian-contribution-graph · GitHub

  • create and modify graphs without writing code
  • it’s not necessary need to integrate with dataview

life is becoming better

Create graph by command


Modify graph


Hi everyone, I have released a new version 0.5.0 today

Release 0.5.0 · vran-dev/obsidian-contribution-graph · GitHub

  • support customized cell styles from UI
  • Add Create contribution graph to the context menu
  • supports specifying the format of dateField
  • Fixed tooltip may not hidden when graph re-rendered
  • support file.ctime and mtime as datefield
  • add datefield suggest
1 Like

Just what I was looking for.

However, I dropped using the filesystem’s date and time for created and modification of notes. It breaks quite easily and is therefore not reliable.

Basically, I use a combination of obsidian-linter and obsidian-frontmatter-modified-date as described in this Obsidian forum post.

sorry for response so late.

for your situation, you can switch Date Field to Specific Page Property in the form, then input your customized date property name

1 Like


I’m currently using a plugin call “Better word count” and it stores my daily word count in a .json file.

However, i couldn’t work out how to make the plugin read data in that .json file, can you help me with that?

Many thanks.

This requires the use of dvjs code

  • read data from json file
  • Parse this data and group by day
  • use contribution graph’s API to render this data

JSON read sample

const jsonString = await".obsidian/vault-stats.json");
const jsonObject = JSON.parse(jsonString);

contribution graph’s API document: obsidian-contribution-graph/ at master · vran-dev/obsidian-contribution-graph · GitHub