Heatmap intensity fails and all entries have no color

[react-muzi]

There has been a sudden and universal failure to all my heatmaps (all of which were working 1-2 weeks ago) such that they are completely white (screenshot below). I believe this is a universal problem with all heatmaps now and can confirm that all heatmaps in the EXAMPLE_VAULT also doesn't work anymore. However the content entries are still visible.

[epsilonhalbe]

i have the same issue, can confirm this behaviour.

obsidian version 1.6.1
os mac Sonoma 14.5

[KylePace1]

I have the same issue as well. My calendars still work properly on my iOS mobile device. Issue has persisted for a few weeks now.

[kjarnot]

Same issue.

Version 1.6.1 (Installer 1.4.16)
macOS 14.5

[SenhorLucas]

Note: my issue was unrelated but I'll leave the comment in case someone else has the same issue as I did. Tldr: I had mixed property types.

---

Same here

Obsidian 1.4.12
macOS 14.5
Heatmap Calendar 0.6.0

Quite remarkable that everyone has macOS 14.5 Sonoma...

How to reproduce (ish)

The JS code looks like this:

```dataviewjs
dv.span("** 😊 Mood  😥**")

const calendarData = { 
    year: 2024,
    colors: {
        blue: ["#8cb9ff","#69a3ff","#428bff","#1872ff","#0058e2"],
    },
	entries: [],
	intensityScaleStart: 0,
	intensityScaleEnd: 10,
}

for(let page of dv.pages('"2. Calendar/Journal"').where(p=>p["tracker-mood"])){ 
    console.log(calendarData)
    calendarData.entries.push({
        date: page.file.name, 
        intensity: page.mood,
        content: await dv.span(`[](${page.file.name})`), //for hover preview
    })
}

renderHeatmapCalendar(this.container, calendarData)
```

On dark mode I can see some data in the graph:

On light mode everything is the same color:

UPDATE 1: manual entries make colors come alive

I got the colors to work by using manual entries (not ideal, of course, but might help the debugging):

```dataviewjs
const calendarData = { 
	entries: [
    	{date: "2024-05-20", intensity: 1},
    	{date: "2024-04-20", intensity: 3},
    	{date: "2024-03-20", intensity: 5},
    	{date: "2024-02-20", intensity: 7},
    	{date: "2024-01-20", intensity: 9},
    ],
	intensityScaleStart: 0,
	intensityScaleEnd: 10,
}

renderHeatmapCalendar(this.container, calendarData)
```

UPDATE 2: Solution

It happened so that in one of my daily notes the "tracker-mood" property was set to (0-10) (literally). So that somehow screwed up the entire thing. As soon as I fixed that, the chart came alive.

tip: using Obsidian Project Manager plugin you can easily view, edit and rename the front matter on multiple files in a folder at once. That is actually my main use case for the Project Manager plugin.

Going forward

I guess I am to blame for the issue, but it would be nice if the plugin were more resilient. This might be a really common mistake, especially when dealing with the wild world of daily notes.

[epsilonhalbe]

I've managed to downgrade obsidian (needed to delete/move mv "~/Library/Application Support/obsidian" "~/Library/Application Support/_obsidian")

and can confirm this is an issue with obsidian 1.6+ so this plugin will not work with the next minor release of obsidian

[epsilonhalbe]

I think I have a fix https://github.com/epsilonhalbe/heatmap-calendar-obsidian branch fix_n_cleanu but I need to test if my changes broke something before creating a PR

[KylePace1]

I added my tracker to a canvas today and expanded it horizontally. When I did I was able to see the entries. Previously my screen was fairly wide - but on the canvas I expanded beyond the bounds of what I would normally see.

[karabays]

I think I have a fix https://github.com/epsilonhalbe/heatmap-calendar-obsidian branch fix_n_cleanu but I need to test if my changes broke something before creating a PR

hi, thanks this seems to be working.

[Richardsl]

Hi,

Cant reproduce on my windows machine, seems to be a mac-os issue.

Check if you have the custom CSS Snippet (from the example vault) included and enabled.
If the snippet is not the cause of the bug, it can probably be used as a fix; as it can change the background of all of the calendars globally.
Snippet Location: "EXAMPLE_VAULT/.obsidian/snippets/heatmap_custom_styling.css"

[epsilonhalbe]

just to make sure, what version of of obsidian is this? 1.6.x or lower

[react-muzi]

Hi,

Cant reproduce on my windows machine, seems to be a mac-os issue.

Check if you have the custom CSS Snippet (from the example vault) included and enabled. If the snippet is not the cause of the bug, it can probably be used as a fix; as it can change the background of all of the calendars globally. Snippet Location: "EXAMPLE_VAULT/.obsidian/snippets/heatmap_custom_styling.css"

Thanks for the reply. Unfortunately I've just tried turning on the CSS snippet and the problem is still persisting.

[react-muzi]

I think I have a fix https://github.com/epsilonhalbe/heatmap-calendar-obsidian branch fix_n_cleanu but I need to test if my changes broke something before creating a PR

hi, thanks this seems to be working.

Thanks I can confirm this worked for me!

[react-muzi]

just to make sure, what version of of obsidian is this? 1.6.x or lower

I'm using v1.6.1 with MacOS Sonoma (similar to many above)

[dartungar]

@Richardsl I'm on Windows and I seem to have the same issue.

Tried canvas trick and it does work:

[belaset]

Updated Obsidian to 1.6.2 today and my heatmap went tiny:

adding height: 100%; to .heatmap-calendar-boxes li brought it back:

ETA: but it's still not quite the same as it was before the update; I usually keep the Obsidian window at a specific size/position, and at that size the heatmap looks like rectangles instead of squares. Here's a before (left)/after (right) comparison if that helps:

[JeroenAbrahams]

The issue could be solved by adding a custom CSS:
.heatmap-calendar-boxes li { margin-inline-start: 0 !important; }

[ckpinguin]

The issue could be solved by adding a custom CSS: .heatmap-calendar-boxes li { margin-inline-start: 0 !important; }

That seems to work, thanks a ton! I haven't even known that particular CSS property until today ;-)
I put it into „heatmap-calendar-workaround.css“ in my snippets folder for now.

[BRobsidian]

Ok, i'm not a dev or something, i don't know nothing about code, but i could solve the problem after some couple minutes through some issue sections about heatmap.
I've installed Visual Studio Code, then i went to my vault folder -> .obsidian -> plugins -> heatmap-calendar -> styles.css
Once i opened styles.css with Visual Studio Code, i searched for ".heatmap-calendar-boxes li {" , and i added those lines:

height: 100%;
margin-inline-start: 0 !important;

After all this, i closed the file, restarted obsidian and heatmap was working again.

I think this happened because of obsidian update, so i turn-off the option "Automatic updates" (settings-> general), cause it took me more than 1 hour to solve a lot of different problems i had with community plugins..

Btw, thanks for who suggested the custom css .heatmap-calendar-boxes li { margin-inline-start: 0 !important; }

[gwynbleiddrivia]

Ok, i'm not a dev or something, i don't know nothing about code, but i could solve the problem after some couple minutes through some issue sections about heatmap. I've installed Visual Studio Code, then i went to my vault folder -> .obsidian -> plugins -> heatmap-calendar -> styles.css Once i opened styles.css with Visual Studio Code, i searched for ".heatmap-calendar-boxes li {" , and i added those lines:

height: 100%; margin-inline-start: 0 !important;

After all this, i closed the file, restarted obsidian and heatmap was working again.

I think this happened because of obsidian update, so i turn-off the option "Automatic updates" (settings-> general), cause it took me more than 1 hour to solve a lot of different problems i had with community plugins..

Btw, thanks for who suggested the custom css .heatmap-calendar-boxes li { margin-inline-start: 0 !important; }

Thanks, this worked for me. Using Linux mint and stuck with this issue last night, thought this was a compatibility issue. Now, it's solved.

[Dmocrito]

Ok, i'm not a dev or something, i don't know nothing about code, but i could solve the problem after some couple minutes through some issue sections about heatmap. I've installed Visual Studio Code, then i went to my vault folder -> .obsidian -> plugins -> heatmap-calendar -> styles.css Once i opened styles.css with Visual Studio Code, i searched for ".heatmap-calendar-boxes li {" , and i added those lines:

height: 100%; margin-inline-start: 0 !important;

After all this, i closed the file, restarted obsidian and heatmap was working again.

I think this happened because of obsidian update, so i turn-off the option "Automatic updates" (settings-> general), cause it took me more than 1 hour to solve a lot of different problems i had with community plugins..

Btw, thanks for who suggested the custom css .heatmap-calendar-boxes li { margin-inline-start: 0 !important; }

Thanks, this solution worked also fine for me =)
Currently using ubunut. I had this issue after I updated obsidian to the new version.

[Sockzz]

Cheers guys, vscode and adding the ".heatmap-calendar-boxes li { margin-inline-start: 0 !important; }" line got it going again.

[gynl]

Seems to come from app.css:9639

.markdown-rendered ul > li,
.markdown-rendered ol > li {
  /* margin-inline-start: var(--list-indent); */
  padding-top: var(--list-spacing);
  padding-bottom: var(--list-spacing);
  position: relative;
}

When the line is commented, I’ve no more problems.

Best greetings,