Obsidian Stats logoObsidian Stats

Interactive Hill Chart

by volodymyrkoval
5
4
3
2
1
Score: 50/100
Install Code

Description

Plugin thar brings interactive hill charts to Obsidian

Reviews

No reviews yet.

Stats

1
stars
144
downloads
0
forks
118
days
118
days
118
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
9
commits

Latest Version

1.0.2
4 months ago

Changelog

See all version on GitHub

README file from

Github

Interactive Hill Chart

An Obsidian plugin for tracking work progress on a hill chart. Dots are draggable, linked to notes, and live entirely inside your vault — no external services, no hidden state.

Hill Chart plugin demo

What is a Hill Chart?

A hill chart visualizes progress as a hill: the left (uphill) side represents work that is still being figured out, and the right (downhill) side represents work that is being executed. Moving a dot over the peak signals a shift from uncertainty to confidence.

Quick Start

Create a fenced code block with the hill-chart language tag:

```hill-chart
dots:
  - 10: Research
  - 40: Design
  - 70: Build
  - 90: Ship
```

Each entry is - <position>: <label>, where position is 0–100. Drag a dot to update its position — changes are written back to the code block automatically. Use Obsidian wiki-link syntax as a label ("[[Note Name]]") to make it clickable.

CSS Variables and Theming

All colors default to currentColor (Obsidian's text color), so charts work in light and dark themes out of the box. Every color field accepts any of these formats:

color: currentColor          # inherits Obsidian text color (default)
color: var(--text-muted)     # any Obsidian CSS token
color: var(--color-accent)
color: "#23ad32"             # hex — 3, 4, 6, or 8 digits
color: "#fff"
color: "#ffffff80"           # hex with alpha
color: rgb(35, 173, 50)
color: rgba(35, 173, 50, 0.5)
color: hsl(130, 66%, 41%)
color: hsla(130, 66%, 41%, 0.8)
color: red                   # any CSS named color
color: transparent

Full Example

```hill-chart
chart:
  curve:
    stroke: "#23ad32"
    strokeWidth: 2
    fill: none
  baseline:
    visible: true
    stroke: "#23ad32"
    opacity: 0.2
    strokeWidth: 1
  uphill:
    label: "Figuring it out"
    fontSize: 11
    color: var(--text-muted)
  downhill:
    label: "Making it happen"
    fontSize: 11
    color: var(--text-muted)
  divider:
    visible: true
    stroke: var(--text-muted)
    strokeWidth: 1
    style: dashed
  dot:
    color: "#23ad32"
    opacity: 0.85
    radius: 7
    fontSize: 11
    fontColor: var(--text-muted)
dots:
  - 5: "[[Idea]]"
  - position: 30
    label: "[[Research]]"
  - position: 55
    label: "[[Design]]"
    style:
      color: "#f5a623"
      opacity: 0.9
      radius: 9
      fontSize: 13
      fontColor: var(--text-muted)
  - position: 80
    label: "[[Build]]"
  - 95: "[[Ship]]"
```

Acknowledgements

Inspired by obsidian-hill-charts by stufro.

Releasing: see RELEASING.md

Sponsors