Step 7 · Charts that say something

If the deck carries market comparisons, timelines, adoption trends, survey results, technical benchmarks, or research findings, use real charts rather than pasted images.

Because the deck is HTML, ECharts embeds straight into a slide. It picks up the deck's palette, it updates when the data changes, and it stays sharp when a projector blows it up.

The prompt

Scan the deck and identify slides where an ECharts visualisation would
improve understanding. Use one only where it genuinely helps.

Consider charts for:
1. Comparisons
2. Trends over time
3. Rankings
4. Market share
5. Adoption curves
6. Survey results
7. Before/after metrics
8. Technical benchmarks

Instructions:
1. Do not add a chart to every slide.
2. Choose the best chart type for each case.
3. Match the chart styling to the deck's visual system.
4. Use real data where it exists.
5. Where exact data is missing, use clearly labelled illustrative data
   and tell me it needs verification.
6. Place the chart so it supports the slide's key message.

Then summarise:
1. Which slides got charts.
2. What type each one is.
3. What data was used.
4. Which data points need verifying.

Clause 5 is one of the most important lines in this book

"Where exact data is missing, use clearly labelled illustrative data and tell me."

It mirrors a product-level rule in OpenDesign: when it lacks real data, it uses honest placeholders instead of fabricating numbers. Restating it here matters because a chart is more persuasive than a sentence — a bar drawn on a slide is assumed to be true.

Being asked on stage where the 32% came from, and having no answer, is the worst way for a deck to fail.

Choosing the type

Content	Chart	Why
Market growth	Line or area	Shows direction and momentum
Competitive comparison	Bar or radar	Makes differences visible fast
Category share	Pie, donut, or treemap	Distribution at a glance
Workflow stages	Funnel or stacked bar	Shows conversion or progression

A few things experience adds:

• Past five categories, drop the pie. A horizontal bar chart labels better and reads faster.
• Past four trend lines, split it. Small multiples, or keep the two you're discussing and grey the rest into background.
• Bar charts start the Y axis at zero. Not starting at zero exaggerates the difference, and being caught doing it once costs you the room.

Charts belong to the deck

Clause 3 in practice means checking:

• [ ] The deck's palette, not ECharts' default blue-and-orange
• [ ] The same typeface as the body text
• [ ] Gridlines and axes matching the deck's neutral ramp
• [ ] Radii and shadows matching the cards
• [ ] On a dark deck, a dark chart — not a white rectangle pasted on

That last one catches people constantly. ECharts defaults to a white background, which on a dark slide looks like a sheet of paper taped down.

One chart, one point

The classic mistake on a data slide is plotting everything available. One chart per slide, one conclusion per chart.

Title the slide with the conclusion, not the topic:

• Weak: "User growth data"
• Better: "After Q3, growth comes from referrals, not spend"

With the conclusion in the title, the chart becomes evidence and the audience knows where to look.

Handing over real data

If you have the numbers, give them directly:

Chart this slide from the following real data. Do not alter the values:

month,new_users,retention
2026-01,1240,0.62
2026-02,1580,0.65
2026-03,2010,0.71

Combination chart on two axes: bars for new users, a line for
retention. Title it with the conclusion.

Pasting CSV is the least error-prone way to hand over numbers.

Where it goes wrong

Trap	How it shows	Fix
A chart on every slide	The deck becomes a report	Keep "not on every slide"
Invented numbers	You get stuck on stage	Keep clause 5, and check every source
ECharts default palette	Charts look imported	Require the deck's palette explicitly
Tiny legends	Illegible on a projector	Set a minimum size, or label series directly
Y axis not at zero	You get accused of spin	Require zero unless there's a stated reason

Next

Step 8 · Motion and Three.js, sparingly — the deck already works. The last two steps are polish, and the easiest to overdo.