chartsai.Built by SupaMakers ↗
ORIGINAL WORKED EXAMPLE

Stacked bar chart showing task composition

This stacked bar chart shows completed, in-progress and not-started tasks within three fictional teams. Each full bar represents the team’s task total, and the coloured segments account for its parts.

Edit this chart ↗Inspect the data ↓
The parts behind each total. Categories compared with bars. Exact input and calculated values are available in the data tables.
Original fictional data · Apache ECharts · 1200 × 800
Take the exampleSVG ↓PNG ↓CSV ↓ECharts JSON ↓

How to read this chart

Team A has 30 completed, 12 in progress and 8 not started, totalling 50 tasks. Team B also totals 50, composed of 24, 20 and 6. Team C totals 60, with 36 completed, 9 in progress and 15 not started.

Completed tasks form the bottom segment and share a zero baseline, so their counts are straightforward to compare. The in-progress segments start at different heights, making their lengths less directly comparable. Read the data table for exact segment differences.

Try the calculation yourself

Switch to 100% stacked mode to compare composition independently of team size. A and C both have 60% completed despite different completed counts and totals. B has 48% completed. This is a different question from which team has completed the most tasks.

Open this exact example, change the data or calculation settings, and compare the result. The CSV preserves the input rows; the ECharts JSON contains drawing options.

What this example cannot tell you

The task statuses and counts are fictional. They assume each task belongs to exactly one listed status. Overlapping status definitions would double-count tasks and make the total misleading. The chart does not measure effort, task complexity or team productivity.

Can overlapping categories be stacked?

A parts-of-whole stack needs mutually exclusive parts that can legitimately be added. If one task appears in both completed and in-progress counts, the full bar no longer represents a distinct-task total. Fix the definitions or choose a comparison that does not imply addition.

Calculation convention

Bars compare magnitudes through length. A numeric axis that includes zero makes those lengths interpretable. Negative values extend in the opposite direction. Category labels are kept in the supplied order, so a chronological or meaningful custom order survives import. Use a Pareto chart if you intentionally want a descending ranking and cumulative share.

Method background: ONS: axes and gridlines.

Created by SupaMakers for ChartsAI · September 8, 2026. Source and reuse terms.

Keep exploring

Horizontal bar chart example with long category labels
Bar chart · Fictional data

Horizontal bar chart example with long category labels

Horizontal bars give longer category names room to remain readable. This fictional feedback summary compares four requested improvements using response counts, with a shared numeric baseline.

Explore chart & data →
Grouped bar chart comparing two periods
Bar chart · Fictional data

Grouped bar chart comparing two periods

A grouped bar chart places two series beside each other within every category. This fictional regional example compares orders in two reporting periods, preserving a common baseline for direct comparisons.

Explore chart & data →
100% stacked bars with unequal totals
Bar chart · Fictional data

100% stacked bars with unequal totals

A 100% stacked chart compares composition after dividing each category by its own total. This example uses totals of 40, 200 and 100 so readers can see why equal bar heights do not mean equal counts.

Explore chart & data →