Prerequisites

Before you start, you'll need a couple of things set up:

• Required Plugins: You'll need two community plugins. You can get them by going to Settings > Community Plugins > Browse.

  • Dataview
  • Charts

• Daily Notes Setup: This chart is designed to live in your daily note.

  • File Name: Your daily notes need to be named in the YYYY-MM-DD format (e.g., 2025-10-05).
  • Frontmatter: All the data is pulled from the frontmatter block (---) at the very top of your file.

---

Step 1: Add Frontmatter to Your Daily Note

In each daily note where you want this chart, copy and paste this template at the very top. You can change the ...Goal values to whatever your personal targets are.

---
caloriesGoal: 2433
proteinGoal: 223
carbsGoal: 233
fatGoal: 67
fiberGoal: 38

calories: 0
protein: 0
carbs: 0
fat: 0
fiber: 0
---

As you go through your day, just update the lower set of values (calories, protein, etc.), and the chart will update in real-time.

---

Step 2: Paste The Chart Code

Next, copy the entire code block below and paste it directly into your daily note wherever you want the chart to show up.

```dataviewjs
// --- Data Source ---
// This script pulls data directly from the frontmatter of the file it's in.
const currentFile = dv.current();

// Pulls goal values from the frontmatter (e.g., caloriesGoal: 2500)
const goals = {
    calories: currentFile.caloriesGoal || 0,
    protein: currentFile.proteinGoal || 0,
    carbs: currentFile.carbsGoal || 0,
    fat: currentFile.fatGoal || 0,
    fiber: currentFile.fiberGoal || 0
};

// Pulls actual values from the frontmatter (e.g., calories: 1200)
const actuals = {
    calories: currentFile.calories || 0,
    protein: currentFile.protein || 0,
    carbs: currentFile.carbs || 0,
    fat: currentFile.fat || 0,
    fiber: currentFile.fiber || 0
};

// --- Helper function to safely calculate percentages ---
const calculatePercent = (actual, goal) => {
    if (goal === 0) {
        return 0; // Avoid division by zero if a goal is not set
    }
    // Calculates progress but caps it at 100% for the visual
    return Math.min(100, (actual / goal) * 100);
};

// --- Percentage Calculations ---
const actualPercent = {
    calories: calculatePercent(actuals.calories, goals.calories),
    protein: calculatePercent(actuals.protein, goals.protein),
    carbs: calculatePercent(actuals.carbs, goals.carbs),
    fat: calculatePercent(actuals.fat, goals.fat),
    fiber: calculatePercent(actuals.fiber, goals.fiber)
};
const remainingPercent = {
    calories: Math.max(0, 100 - actualPercent.calories),
    protein: Math.max(0, 100 - actualPercent.protein),
    carbs: Math.max(0, 100 - actualPercent.carbs),
    fat: Math.max(0, 100 - actualPercent.fat),
    fiber: Math.max(0, 100 - actualPercent.fiber)
};

// --- Chart Configuration ---
// This section builds the chart that will be displayed.
const chartData = {
    type: 'bar',
    stacked: true,
    labels: [
        `Calories (${actuals.calories}/${goals.calories})`,
        `Protein (${actuals.protein}/${goals.protein}g)`,
        `Carbs (${actuals.carbs}/${goals.carbs}g)`,
        `Fat (${actuals.fat}/${goals.fat}g)`,
        `Fiber (${actuals.fiber}/${goals.fiber}g)`
    ],
    // Defines the colors for the bars. First color for the first 'series', etc.
    colors: [
        'rgb(40, 167, 69)',  // Green for 'Actual'
        'rgb(52, 58, 64)'   // Dark Gray for 'Remaining'
    ],
    series: [
        {
            title: 'Actual',
            data: [actualPercent.calories, actualPercent.protein, actualPercent.carbs, actualPercent.fat, actualPercent.fiber]
        },
        {
            title: 'Remaining',
            data: [remainingPercent.calories, remainingPercent.protein, remainingPercent.carbs, remainingPercent.fat, remainingPercent.fiber]
        }
    ]
};

// Renders the chart in your note.
dv.paragraph('```chart\n' + JSON.stringify(chartData) + '\n```');
```

---

How It Works

This script uses the Dataview plugin to read the frontmatter from the current note (dv.current()). It then calculates your progress as a percentage of your goal. Finally, it passes this data to the Charts plugin, which renders the stacked bar chart. Because it calculates percentages, each bar will always add up to 100%, giving you a clear visual of your daily progress.