Skip to content
Nutrition Simple #volume#satiety#calorie-density

Volume per Calorie

A pound of broccoli: 150 kcal. A pound of cheese: 1800. Filling the stomach with low-density food beats counting alone.

A free, animated volume per calorie you can read here or embed on any website, from Scrollchart.

Volume per Calorie

Volume per 200 CaloriesGrams of food needed to deliver the same 200 kcal across eight common itemsLettuce / greens25 kcal / 100 gCucumber27 kcal / 100 gBroccoli40 kcal / 100 gApple57 kcal / 100 gChicken breast105 kcal / 100 gBrown rice (cooked)167 kcal / 100 gCheddar cheese364 kcal / 100 gButter909 kcal / 100 g800 g740 g500 g350 g190 g120 g55 g22 g

Side-by-side visuals of foods at 200 kcal each: a giant pile of vegetables vs a small chunk of butter. Calorie-density bars to the right.

Good for

  • Weight-management articles on satiety and calorie density
  • Dietitian handouts comparing portion sizes at matched calories
  • Volumetrics-style diet education for beginners

Source & accuracy

This volume per calorie is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.

Same weight, wildly different energy

Volume per calorie is the inverse of caloric density: how much physical food a given number of calories buys. A pound of broccoli supplies only around 150 kcal, while a pound of hard cheese can carry close to 1,800. The broccoli fills the stomach far more for the same energy because it is mostly water and fiber, whereas cheese is concentrated fat and protein.

Stomach stretch and the slower passage of high-fiber, high-water foods both contribute to fullness signals, so low-density foods tend to satisfy hunger at a lower calorie cost.

Eating for satiety instead of counting alone

Choosing higher-volume, lower-density foods (vegetables, fruit, broth-based soups, lean protein) can make a calorie target easier to hit without constant tracking, because fullness arrives sooner. This is a practical strategy for appetite, not a license to ignore total intake, since calorie-dense additions like oils can quietly offset the benefit.

This is general educational information, not medical or dietary advice. A qualified professional can advise on an approach suited to the individual.

Embed this diagram

Add this animated volume per calorie to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.

Reference

What this is
A free, embeddable, animated volume per calorie for any website.
Who uses it
Nutrition blogs, Weight-loss sites, Cooking blogs.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.

Embed format options

Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback - see the WordPress plugin page for details. Any format keeps the same Core Web Vitals profile and the same explainer text.

Embed snippet
<div data-scrollchart="food-volume-vs-calories" data-scrollchart-v="1"></div>
<script src="https://scrollchart.com/embed.js" async></script>

Frequently asked questions

Where can I get a free animated "Volume per Calorie" for my website?
Scrollchart provides "Volume per Calorie" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a volume per calorie diagram in a health or wellness blog?
Copy the HTML snippet from the Scrollchart diagram page and paste it into any post or page in your CMS. It works in WordPress, Webflow, Ghost, Substack, and plain HTML without any plugin or account. The diagram renders as animated SVG directly in your page, so search engines can index the accompanying explainer text.