Half an Hour to Fix a Bug (That Felt Like Two Days)

I just spent about 30 minutes fixing a bug that had been annoying me for two days. Our YouTube Analyzer was showing "Total Responses: 100" instead of the actual number of analyzed comments.

The problem seemed simple: we were passing totalValue={result.stats.analyzed} to the chart component, but it stubbornly displayed 100. Classic.

What Went Wrong

We use ApexCharts for visualization. It's a powerful library, but it can be finicky with Svelte 5's reactivity. It turned out that:

  1. Formatter isn't reactive. When ApexCharts initializes, it "remembers" the formatter function. If that function relies on an external variable (totalValue) that changes later, the chart doesn't automatically update.
  2. Fallback to Sum. We had a fallback: if totalValue wasn't provided, it calculated the sum of the series. For percentages (65 + 15 + 20), that's always 100. So the chart was "stuck" on that value.
  3. Need updateOptions. ApexCharts requires an explicit chart.updateOptions() call when configuration changes. We added an $effect in Svelte, but even that wasn't enough on its own.

The Solution

We wrapped the chart in a {#key result} block. This forces Svelte to completely re-create the component when new data arrives. Simple, but robust.

Plus, we removed the fallback to the sum — now the chart strictly shows totalValue or 0.

Why It Matters

This isn't just a "cosmetic" bug. When a user sees "100 comments" but knows there are 1247, they lose trust in the tool. Especially if it's a paid product.

At WRIO, we bet on transparency. Build in Public isn't just about successes; it's about honest mistakes. This little bug was a good reminder to always verify our data flow.

Full technical breakdown: wr.io/wrio/feed/youtube-analyzer-update-jan-2026

Try the tool: wr.io/wrio/products/youtube-analyzer

Tags: #BuildInPublic #wr.io #TechDebt #SvelteKit #ApexCharts