Skip to content
Cooking & Food Science Simple #fiber#foods

Fiber Per 100 Calories

Beans, vegetables, and whole grains compared on fiber-per-calorie density.

A free, animated fiber per 100 calories you can read here or embed on any website, from Scrollchart.

Fiber Per 100 Calories

Fiber Per 100 CaloriesLegumes deliver 10+ g fiber per 100 kcal; meat delivers zero. Same calories, very different fullness.0g3g6g9g12gDietary fiber (grams) per 100 kcalDaily target25 gAI for adult women(38 g for adult men)To hit 25 g/day:1 cup lentils= ~15 g fibervs 10+ slicesof white breadfor the same fiberWhy fiber fills youSlows gastric emptyingRaises GLP-1 and PYYFeeds gut microbiota(butyrate production)Most adults consume 12-15 g/day vs 25-38 g recommended. Legumes and berries are the highest-efficiency sources per calorie.

Fiber per 100 kcal for legumes (10g+), berries (7g), broccoli (4g), oats (3g), white bread (1g), meat (0g).

Good for

  • Fiber-focused cooking articles comparing legumes, vegetables, and grains on fullness-per-calorie
  • Nutrition blog content explaining why beans outperform bread for gut health and satiety per calorie eaten
  • Meal-planning guides for high-fiber diets that control calorie intake without counting every gram

Source & accuracy

This fiber per 100 calories 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.

Fiber density varies wildly among whole foods

Beans deliver the most fiber per calorie: lentils provide roughly 3 grams of fiber per 100 calories, followed by chickpeas at 2.5 grams and split peas at 2 grams. These legumes are so efficient because their calories come primarily from carbohydrates and protein, with minimal fat, while their complex structure traps both soluble and insoluble fiber.

Vegetables rank second, with raspberries, broccoli, and artichokes offering 1.5 to 2 grams per 100 calories. Whole grains like oats and barley deliver 0.8 to 1.5 grams per 100 calories because roughly 30 percent of their calories come from fat (bran and germ oils), which dilutes the per-calorie ratio.

Building meals around fiber density

A 100-calorie serving of beans delivers 3 grams of fiber, while the same calories from brown rice yields only 0.5 grams. Strategic swaps multiply daily fiber without adding volume. Replacing half a rice portion with lentils doubles the fiber in that meal.

Raw vegetables appear less efficient than cooked because portion sizes double when cooked (weight-for-weight, raw has the same fiber). A cup of raw broccoli provides more fiber than a cup of cooked, but people typically eat more cooked vegetables because they're softer and more appealing. The practical takeaway is that beans, whole grains, and vegetables combined cover all fiber types.

Embed this diagram

Add this animated fiber per 100 calories 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 fiber per 100 calories for any website.
Who uses it
Cooking blogs, Nutrition 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="fiber-foods-bar" data-scrollchart-v="1"></div>
<script src="https://scrollchart.com/embed.js" async></script>

Frequently asked questions

Where can I get a free animated "Fiber Per 100 Calories" for my website?
Scrollchart provides "Fiber Per 100 Calories" 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 fiber per 100 calories in WordPress or a static site?
Paste the HTML snippet from the Scrollchart diagram page into your WordPress post (in HTML/code view), your Webflow embed block, or directly into a static HTML file. No plugin is needed. The diagram loads from scrollchart.com and paints in as the reader scrolls.