Skip to content

Top Countries — troubleshooting

This page covers issues unique to Top Countries (tcw.js). Most widget failures are environment-related — see common troubleshooting first.

Top Countries is the simplest of the four widgets. It loads:

  • The widget script itself from https://statable.com/js/tcw.js
  • No D3, no TopoJSON, no world atlas.
  • Country flag SVGs from https://cdn.jsdelivr.net/gh/lipis/flag-icons/... (one per visible country row).
  • One API call to https://statable.com/api/widget/top-countries.

If the widget doesn't show, the cause is almost always in the host environment (blocked script, blocked API call, CSP). Walk through common troubleshooting first.

Widget shows "Waiting for the first visitor"

This is the empty state, not an error. The widget renders this when the API returns an empty data array. Causes:

  • The tracking script isn't installed on the site whose data-hash you're using — install the snippet.
  • data-period is too short for the site's traffic. Default is 7d. Try 30d.
  • All visits in the window came from sources without a country header — they collapse into the "Others" row, which isn't enough on its own to populate the list.

The empty state is not an error path — no console message fires.

Some flags render as a grey question mark

Each country flag is fetched per row from https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/4x3/<code>.svg. The <img> tag has an onerror handler that swaps in a question-mark SVG when the flag fails. Causes:

  • The country code returned by the API isn't in the lipis/flag-icons set (e.g. XK for Kosovo, custom region codes).
  • Your CSP doesn't include img-src https://cdn.jsdelivr.net — see the shared CSP table.
  • A privacy extension blocks jsdelivr.net as a third-party domain.

The "Unknown" row (visits with no country header at all) always renders as a question mark by design.

Console warning about data-width

[Statable tcw.js] data-width=120 is below the 180px minimum; clamping to 180px.

Just a console warning — not an error. Flags and country names need at least 180 px of horizontal room. The widget still renders at 180 px when you ask for less. Either set data-width="180" or higher to silence the warning, or ignore it.

Tooltips on values don't appear

Each value cell has a tooltip showing the inverse format — percentage when you display numbers, absolute count when you display percentages. The tooltip is positioned at document.body via position: fixed.

If tooltips don't appear:

  • Your page has a global * { pointer-events: none } rule blocking mouseenter events on the value cells.
  • A global * { transition: none } rule prevents the tooltip from fading in (it stays at opacity: 0).
  • The tooltip is rendered but covered by an overlay with higher z-index than 9999.

There's no console error in any of these cases.

Ready to take control of your web analytics? Try Statable free for 30 days — no credit card required, full feature access, GDPR-compliant by default. Start your free trial or view a live demo.